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. C#使用浏览器打开网址

    使用指定浏览器打开网址: System.Diagnostics.Process.Start("360chrome.exe", "http://converter.tele ...

  2. mysql 面试100 问(精华学习)。待开始理

    https://juejin.im/post/6850037271233331208 https://juejin.im/entry/6844903681091977229

  3. iscsi客户端常用操作

    说明 本篇主要记录iscsi的客户端的一些常用的一些操作 iscsi服务端常用操作 删除一个lun tgtadm --lld iscsi --mode logicalunit --op delete ...

  4. 加速OSD的启动

    ceph是目前开源分布式存储里面最好的一个,但是在高负载下会有很多异常的情况会发生,有些问题无法完全避免,但是可以进行一定的控制,比如:在虚拟化场景下,重启osd会让虚拟机挂起的情况 重新启动osd会 ...

  5. 自动化测试_移动端测试(二)—— Appium原理

    一.什么是Appium Appium是一个开源.跨平台的测试框架,可以用来测试原生及混合的移动端应用.Appium支持IOS.Android及FirefoxOS平台.Appium使用WebDriver ...

  6. kettle练习

    Kettle实现,把数据从CSV文件复制到Excel文件. 首先,创建一个转换,找到核心对象,找到输入里面的CVS文件输入图元,拖拽到工作区域,双击CVS文件输入. 可以修改步骤的名称,点击浏览,选择 ...

  7. Java 用jxl读取excel并保存到数据库(此方法存在局限,仅限本地电脑操作,放在服务器上的项目,需要把文件上传到服务器,详细信息,见我的别的博客)

    项目中涉及到读取excel中的数据,保存到数据库中,用jxl做起来比较简单. 基本的思路: 把excel放到固定盘里,然后前段页面选择文件,把文件的名字传到后台,再利用jxl进行数据读取,把读取到的数 ...

  8. Hash算法——加密解密说明

    MD5 pmd5-md5加密解密 加密类型识别工具 hash-identifier

  9. 今天谁也别想阻止我好好学习!「CDR 6·18特惠倒计时2天!」

    前几天小编刷抖音,一个以农夫山泉为创作背景的服装原创视频 让我为之一震 这个自称以捡瓶子为生的服装设计师 让我产生了极为浓烈的兴趣 细扒这位小姐姐的视频 她用身边的常见物品 脑洞大开的画出了一系列插画 ...

  10. Boom 3D带你聆听《我们的乐队》音乐盛宴

    说到前段时间大热的音乐类综艺节目,<我们的乐队>肯定值得一提.<我们的乐队>是由谢霆锋.萧敬腾.王俊凯担任导师,以团队的形式组成各种风格的乐队,并通过同场比拼,最终选出获胜的乐 ...