此方法只适用于现代浏览器,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. gulp: Did you forget to signal async completion? 解决方案

    背景 学习gulp的前端自动化构建,按照示例代码,跑了一个简单的task,控制台打出如下提示: The following tasks did not complete: testGulp Did y ...

  2. 我对BP网络的简单的理解

    最近在学习tf的神经网络算法,十多年没有学习过数学了,本来高中数学的基础,已经彻底还给数学老师了.所以我把各种函数.公式和推导当做黑盒子来用,理解他们能做到什么效果,至于他们是如何做到的,暂时不去深究 ...

  3. 笨办法学Python - 习题8-10: Printing & Printing, Printing

    目录 1.习题 8: 打印,打印 2.习题 9: 打印,打印,打印 3.习题 10: 那是什么? 3.1.转义序列: 4.习题总结: 1.习题 8: 打印,打印 学习目标:继续学习 %r 的格式化输出 ...

  4. C++ 函数 引用

    一.引用的概念 引用就是某一变量(目标)的一个别名,对引用的操作与对变量直接操作完全一样.引用的声明方法: 类型标识符 &引用名 = 目标变量名: 为一个变量起一个别名.假如有一个变量a,想给 ...

  5. 20145214《网络对抗》MAL_后门原理与实践

    20145214<网络对抗>MAL_后门原理与实践 基础问题回答 (1)例举你能想到的一个后门进入到你系统中的可能方式? 网页上查找资料时有时会不小心点到弹出来的广告,如果这个广告是个钓鱼 ...

  6. 第二阶段Sprint冲刺会议8

    进展:重新规划主界面,把视频录制暂放到主页面里,先实现功能,视频提醒后期再做.

  7. Task 6.2冲刺会议十 /2015-5-23

    今天是第一个冲刺阶段的最后一天,主要把做出来的程序进行了初步的测试,在一台笔记本上运行程序,摄像头可以工作也能听到声音和麦克多的运转也还可以,两台计算机同时在一个局域网中通信的时候也可以实现.不过后续 ...

  8. 第二篇——VC++简单随机四则运算

    目标:编写最简单的四则运算,类似A+B=C: 想法:建立一个Win32控制台应用程序,A和B用随机数表示,运算符号用0~3的数字对应,然后计算并输出即可: 具体过程: 利用函数rand(),返回一个0 ...

  9. Leetcode题库——7.反转整数

    @author: ZZQ @software: PyCharm @file: IntReverse.py @time: 2018/9/16 16:36 要求:整数反转(给定一个 32 位有符号整数,将 ...

  10. Internet History, Technology and Security (Week2)

    Week2. History: The First Internet - NSFNet coursera address Supercomputers Justify a National Netwo ...