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项目中增加打印功能的更多相关文章

  1. vue项目中批量打印二维码

    前提:项目中要打印的二维码为后台返回,批量选择后,点击打印,先打开二维码预览界面,再执行打印. 以下代码中 codePicList为选中的二维码数组.重点css:page-break-after:al ...

  2. vue项目中使用Lodop实现批量打印html页面和pdf文件

    1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩 ...

  3. 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示

    在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...

  4. Vue项目中添加锁屏功能

    0. 直接上 预览链接 Vue项目中添加锁屏功能 1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localS ...

  5. vue项目中使用ts(typescript)入门教程

    最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...

  6. 如何在Vue项目中,通过点击DOM自动定位VScode中的代码行?

    作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发 ...

  7. 在vue-cli搭建的项目中增加后台mock接口

    用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现 ...

  8. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  9. 去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

随机推荐

  1. [MIT6.006] 18. Speeding up Dijkstra 加速Dijkstra算法

    在之前的课我们讲过了Dijkstra算法,先回顾下,如下图: 那么如果加速DIjkstra算法寻找最短路径呢?这节课上讲师讲了两种方法:双向搜索(Bi-Directional Search)和目标方向 ...

  2. 建议收藏,从零开始创建一个Activiti工作流,手把手教你完成

    环境配置 项目环境: JDK1.8 tomcat7 maven3.5 开发工具: IDEA activiti7 创建项目 目标:创建一个maven项目,集成Activiti,并自动生成25张数据库表 ...

  3. dpkg 批量卸载

    dpkg -l |grep deepin|awk '{print $2}'|xargs sudo dpkg -P

  4. ctfshow之Web入门刷题记(从89开始,持续更新)

    0x01Web89-99PHP特性payload Web89 include("flag.php"); highlight_file(__FILE__); if(isset($_G ...

  5. Web安全常见漏洞修复建议

    转载地址:https://security.pingan.com/blog/17.html SQL注入 在服务器端要对所有的输入数据验证有效性. 在处理输入之前,验证所有客户端提供的数据,包括所有的参 ...

  6. php读取Excel文件数据

    首先先下载 PHPExcel 脚本之家下载地址:https://www.jb51.net/codes/194070.html 然后把文件丢到php脚本同级目录里面 在php文件里面写下以下代码即可 & ...

  7. pandas 对时间索引进行分割

    截取最近1个月时间,截取最近一段时间,进行统计分析 df.loc["2016-01-05":"2016-02-05",:].tail() 在index为有序数据 ...

  8. Java Web 会话技术总结

    会话技术 会话概念 一次会话中包含多次请求和响应. 一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止,一次会话结束. 会话的功能 在一次会话的范围内的多次请求间,共享数据. 会 ...

  9. 苹果电脑下载电影教程:如何用folx下载《小妇人》

    由西尔莎罗南.艾玛沃特森等知名影星重新演绎的<小妇人>又带动了新一轮的<小妇人>热潮.这部由露易莎创作的长篇小说,曾被多次拍摄,无论是小说本身,还是其影视资源,都能让观众回味无 ...

  10. synchronized关键字的内存语义

    以下内容摘自:Java并发编程之美 加锁和释放锁的语义:当获取锁以后会清空锁块内本地内存中将会被用到的共享变量,在使用这些共享变量的时从主内存进行加载,在释放锁时将本地内存中修改的 共享变量刷新到主内 ...