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 ...
随机推荐
- SpringBoot中的响应式web应用
目录 简介 Reactive in Spring 注解方式使用WebFlux 编程方式使用webFlux Spring WebFlux的测试 总结 简介 在Spring 5中,Spring MVC引入 ...
- MCscan-Python-jcvi 共线性画图最后一章更新
经过几轮调试和修改,共线性图终于可以上眼了.如下: 图中红色的为目标基因,蓝色的为reference species目标基因周围15个基因,天蓝色为再往外15个基因,黄色为与reference spe ...
- netfilter 的扩展功能 helper tftp-nat
/* 需要对conntrack进行功能扩展的协议,会初始化一个struct nf_conntrack_helper 实例,把该实例注册到Netfilter中管理的全局哈希表中. 查找helper使用的 ...
- tcp timewait 问题 转载
TIME WAIT 带来的问题 先引用一个名言: The TIME_WAIT state is our friend and is there to help us (i.e., to let old ...
- 《.NET 5.0 背锅案》第5集-案情大转弯:都是我们的错,让 .NET 5.0 背锅
第1集:验证 .NET 5.0 正式版 docker 镜像问题 第2集:码中的小窟窿,背后的大坑,发现重要嫌犯 EnyimMemcachedCore 第3集-剧情反转:EnyimMemcachedCo ...
- Spring源码之AbstractApplicationContext中refresh方法注释
https://blog.csdn.net/three_stand/article/details/80680004 refresh() prepareRefresh(beanFactory) 容器状 ...
- 微软面试题: LeetCode 4. 寻找两个正序数组的中位数 hard 出现次数:3
题目描述: 给定两个大小为 m 和 n 的正序(从小到大)数组 nums1 和 nums2.请你找出并返回这两个正序数组的中位数. 进阶:你能设计一个时间复杂度为 O(log (m+n)) 的算法解决 ...
- OMV openmediavault NAS系统命令显示颜色
闲鱼65f元买的我家云刷了OMV系统. 但ls命令查看文件不显示颜色. cd /etc/进入配置文件目录查看并没有bashrc文件,但有个bash.bashrc 在 bash.bashrc后面加入以下 ...
- Zookeeper集群搭建(多节点,单机伪集群,Docker集群)
Zookeeper介绍 原理简介 ZooKeeper是一个分布式的.开源的分布式应用程序协调服务.它公开了一组简单的原语,分布式应用程序可以在此基础上实现更高级别的同步.配置维护.组和命名服务.它的设 ...
- 搭建zookeeper集群(伪集群)
jdk环境 上传zk压缩包 解压缩 复制三份 mkdir /usr/local/zk_cluster cp -r zookeeper-3.4.6 /usr/local/zk_cluster/zooke ...