此方法只适用于现代浏览器,IE10以下就别用了

// 使用时请尽量在nickTick中调用此方法
//打印
export default (refs, cb) => {
let cloneN
if (Array.isArray(refs)) {
cloneN = refs[0].cloneNode(true)
} else {
cloneN = refs.cloneNode(true)
}
const body = document.getElementsByTagName('body')[0]
cloneN.style.position = 'absolute'
cloneN.style.zIndex = '9999999999'
cloneN.style.top = 0
cloneN.style.left = 0
cloneN.style.width = '100%'
cloneN.style.minHeight = '100%'
cloneN.style.background = '#fff'
body.appendChild(cloneN) // 配置样式
const bt = body.style.cssText
body.style.overflowY = 'auto'
body.style.cloneN = 'auto'
const eld = document.querySelector('.el-dialog__wrapper')
const dc = eld.style.cssText
eld.style.display = 'none'
// 图片全部加载完成后再开始打印
let imgs = cloneN.getElementsByTagName('img')
let len = imgs.length
let ni = 0 const print = () => {
ni += 1
if (ni === len) {
// 开始打印
window.print()
// 还原样式
body.style = bt
eld.style = dc
// 移除节点
body.removeChild(cloneN)
// 回调
if (cb) {
cb()
}
}
} for (let i of imgs) {
i.onload = () => {
print()
}
i.onerror = () => {
print()
}
}
}

适用于vue项目的打印插件的更多相关文章

  1. 适用于vue项目的打印插件(转载)

    出处:https://www.cnblogs.com/lvyueyang/p/9847813.html // 使用时请尽量在nickTick中调用此方法 //打印 export default (re ...

  2. 创建vue项目及引入插件

    部署开发环境 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack cnpm install ...

  3. vscode 中 vue项目使用eslint插件 检查代码

    前言 本文章项目由vue-cli3创建 vscode版本1.36.1 eslint1.9.0 在网上找了一大堆文章,不知是什么原因,没有一篇可以直接使用的 折腾了许久,直接按eslint插件的说明,竟 ...

  4. vue项目中使用插件将字符串装化为格式化的json数据(可伸缩)

    插件地址:https://www.npmjs.com/package/vue-json-viewer 第一步:安装vue-json-viewer插件 $ npm install vue-json-vi ...

  5. vue项目使用vue-photo-preview插件实现点击图片放大预览和移动

    官方链接: http://npm.taobao.org/package/vue-photo-preview # 安装 npm install vue-photo-preview --save # 引入 ...

  6. vue项目 预览照片的插件 v-viewer

    查看图片主要使用的旋转.翻转.缩放.上下切换.键盘操作等功能都有. 1.首先是安装 npm install v-viewer --save 2.安装完在main.js里面引用(还要记得引用它的css样 ...

  7. HTML5 Canvas圆盘抽奖应用(适用于Vue项目)

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  8. 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现

    一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...

  9. 手动搭建webpack + vue项目之初体验

    在使用vue做开发时,大部分人只会使用官方提供的脚手架搭建项目,脚手架虽然很好用,但想要成为一名优秀的前端开发者,webpack这一道坎是绕不开的,所以我们要学会脱离脚手架,利用webpack手动搭建 ...

随机推荐

  1. XSS(Cross Site Script)

    类型一:反射型XSS 简单地把用户输入的数据“反射”给浏览器.也就是说,黑客需要诱使用户“点击”一个恶意链接,才能攻击成功. 类型二:存储型XSS 把用户输入的数据“存储”在服务器端.这种XSS具有很 ...

  2. Ubuntu16.04Server版离线安装Nginx1.8.1+Mysql5.7.23+Python3.6.2

    nginx1.8.1 1.安装前准备工作 1.1.检查系统版本,确认源码编译所依赖的环境,提前下载好压缩包. 整个环境都是使用root权限安装,系统版本为server版的ubuntu16.04.4 r ...

  3. “秒杀”问题的数据库和SQL设计【转载】

    “秒杀”问题的数据库和SQL设计 APRIL 21ST, 2015 问题的来源 完全不考虑一致性的方案 表结构 方案 存在的问题 保证单用户不会重复购买 解决超卖问题 方案 优化 提高性能了 鱼与熊掌 ...

  4. 团队冲刺--Seven

    昨天: 司宇航:测试功能版块,优化功能版块. 马佳慧:优化界面 . 王金萱:合并程序. 季方:  合并程序. 今天: 司宇航:优化功能版块. 马佳慧:优化界面 . 王金萱:优化界面. 季方:  完善功 ...

  5. spring冲刺第一天

    第一天总结 昨天我们开始了spring冲刺会议,我们进行了明确的分工,每个人都有自己的任务.我的目前任务是游戏地图的初步设计. 今天早上我们开了站立会议,算是正式开始了spring冲刺.我上网查找了一 ...

  6. Task 6.4 冲刺Two之站立会议8

    今天团队主要进行了用户使用的部分,因为软件操作相对来说比较复杂,因为要改很多东西,比方用户注册,还有更改软件连接服务器的IP.所以我们需要对用户进行详细地讲解.

  7. java-switch语句

    switch语句是常用的java循环判断语句,但是有的知识点并不一定清楚. 首先是switch语句括号中的判断条件,判断条件只能是整型或者字符和整型或者字符组成的表达式. 再就是case语句,可以称之 ...

  8. Visual Studio 中配置openCV问题

    1. 首先强调一点:VS与openCV的版本对应问题,一般而言,openCV对于VS采用向下的支持方式: vc6 -> VS6.0 vc7.0 -> VS2002 vc7.1 -> ...

  9. 转 C#高性能Socket服务器SocketAsyncEventArgs的实现(IOCP)

    原创性申明 本文作者:小竹zz  博客地址:http://blog.csdn.net/zhujunxxxxx/article/details/43573879转载请注明出处引言 我一直在探寻一个高性能 ...

  10. 对一致性Hash算法及java实现(转)

    一致性Hash算法 关于一致性Hash算法,在我之前的博文中已经有多次提到了,MemCache超详细解读一文中"一致性Hash算法"部分,对于为什么要使用一致性Hash算法.一致性 ...