vue项目中增加打印功能
export default function printFile(html) {
let userAgent = navigator.userAgent;
if (
(userAgent.indexOf("compatible") > -1 &&
userAgent.indexOf("MSIE") > -1) ||
userAgent.indexOf("Edge") > -1 ||
(userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1)
) {
// IE浏览器
let page = window.open("", "_blank"); // 打开一个新窗口,用于打印
page.document.write(html); // 写入打印页面的内容
page.document.execCommand("print");
page.close(); // 关闭打印窗口
} else {
console.log("not IE");
let doc = document.getElementById('printf');
if (doc) {
document.getElementById("app").removeChild(doc)
}
let iframe = document.createElement("iframe");
iframe.id = "printf";
iframe.style.width = "0";
iframe.style.height = "0";
document.getElementById("app").appendChild(iframe);
iframe.contentWindow.document.write(html);
iframe.contentWindow.focus();
iframe.contentWindow.print();
}
}
使用的时候在相应的vue文件中引入 然后在自己的打印事件中调用此方法,传入的参数为你拼接的html片段
vue项目中增加打印功能的更多相关文章
- vue项目中批量打印二维码
前提:项目中要打印的二维码为后台返回,批量选择后,点击打印,先打开二维码预览界面,再执行打印. 以下代码中 codePicList为选中的二维码数组.重点css:page-break-after:al ...
- vue项目中使用Lodop实现批量打印html页面和pdf文件
1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩 ...
- 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示
在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...
- Vue项目中添加锁屏功能
0. 直接上 预览链接 Vue项目中添加锁屏功能 1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localS ...
- vue项目中使用ts(typescript)入门教程
最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...
- 如何在Vue项目中,通过点击DOM自动定位VScode中的代码行?
作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发 ...
- 在vue-cli搭建的项目中增加后台mock接口
用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现 ...
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
- 去除vue项目中的#及其ie9兼容性
一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...
随机推荐
- 类和对象在JVM中是如何存储的,竟然有一半人回答不上来!
前言 这篇博客主要来说说类与对象在JVM中是如何存储的,由于JVM是个非常庞大的课题,所以我会把他分成很多章节来细细阐述,具体的数量还没有决定,当然这不重要,重点在于是否可以在文章中学到东西,是否对J ...
- exec系列函数详解
execve替换进程映像(加载程序):execve系统调用,意味着代码段.数据段.堆栈段和PCB全部被替换.在UNIX中采用一种独特的方法,它将进程创建与加载一个新进程映像分离.这样的好处是有更多的余 ...
- 【webSokect】基于django Channels的简单实现
# settings.py: INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.con ...
- JS 实现飞机大战
这是JS版本的飞机大战,和C#版本的思路相同,就是语言上有差别,用来巩固知识.可以将代码直接引入到HTML中就可以看到效果 //编写背景对象 function Background(width,hei ...
- 卸载python安装的软件
python源码安装的软件是无法通过命令卸载的,这个可以通过记录安装过程的形式来卸载安装的软件 以 python2.7.2 为例,在这个目录中有一个 setup.py 的文件,很显然这是安装程序,还是 ...
- javascript——什么是解释型语言?
摘要:<JavaScript基础与案例开发详解>(张孝祥,徐明华)第2章JavaScript环境,本章力求让读者了解JavaScript的开发环境.运行环境,和开发中会遇见的一些问题,做好 ...
- 面试官:别的我不管,这个JVM虚拟机内存模型你必须知道
前言 说jvm的内存模型前先了解一下物理计算机的内存处理. 物理计算器上用户磁盘和cpu的交互,由于cpu读写速度速度远远大于磁盘的读写速度速度,所以有了内存(高速缓存区).但是随着cpu的发展,内存 ...
- 全网最全!这份深入讲解jdk和jvm原理的笔记,刷新了我对JVM的认知
前言 前两天和朋友探讨技术的时候有聊到JVM和JDK这一块,聊到这里两个人就像高山流水遇知音那是根本停不下来,事后我想着趁现在印象还比较深刻就把这些东西整理起来分享给大家来帮助更多的人吧.话不多说,满 ...
- pip install 一个本地包时提示error: Microsoft Visual C++ 14.0 is required.
错误如下: error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Too ...
- Mac虚拟环境安装django
安装:pip3 install virtualenv 创建:Virtualenv env01 激活:Source env01/bin/activate django安装:pip3 install dj ...