出处:https://www.cnblogs.com/lvyueyang/p/9847813.html

// 使用时请尽量在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项目的打印插件

    此方法只适用于现代浏览器,IE10以下就别用了 // 使用时请尽量在nickTick中调用此方法 //打印 export default (refs, cb) => { let cloneN i ...

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

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

  3. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. Class does not Implement Equals——Code Correctness(代码正确性)

        系列文章目录:     使用Fortify进行代码静态分析(系列文章) class does not implement equals(类未能实现Equals方法)   示例:  protec ...

  2. python变量名感悟

    我感悟的是python的变量名其实就可以理解为C/C++中的指针! 1.python的变量在使用之前必须赋值,就像指针在使用之前不能为空. 2.python的内存可以用del释放,C++可以用dele ...

  3. HTML基础之JS

    HTML中的三把利器的JS 又称为JavaScript,看着好像和Java有点联系,实际上他和java半毛钱关系都没有,JavaScript和我们学习的Python.Go.Java.C++等,都是一种 ...

  4. [LOJ#6066]. 「2017 山东一轮集训 Day3」第二题[二分+括号序列+hash]

    题意 题目链接 分析 首先二分,假设二分的答案为 \(mid\),然后考虑利用括号序列来表示树的形态. 点 \(u\) 的 \(k-\) 子树的括号序列表示实际上是刨去了 \(u\) 子树内若干个与 ...

  5. SpringBoot中使用Quartz笔记

    Quartz可以用来做什么? Quartz是一个任务调度框架,可用来做定时任务. 吧啦吧啦......... 还是直接上代码. application.properties  配置文件. * * ? ...

  6. Yeoman的好基友:Grunt

    grunt介绍 前端不能承受之痛 1.这是我们的生活 文件压缩:YUI Compressor.Google Closure 文件合并:fiddler + qzmin 文件校验:jshint 雪碧图:c ...

  7. DMS专线联通外网测试

    配置 CE Ping PE: “本地链接”-->属性-->"Internet 协议版本4(TCP/IPv4)",选择“使用下面的IP”,填写“172.16.10.21” ...

  8. 【Alpha】第二次Scrum meeting

    本次会议内容概括如下: 总结了今天各成员分配任务完成情况,对消耗时间进行统计 评估了各自对团队的贡献(影响)程度 初步讨论了日后需要逐步完成的一些任务并发布在github上 具体内容如下表所示: Me ...

  9. [2017BUAA软工助教]剩余个人作业与deadline

    软件工程剩余作业与deadline 标签(空格分隔): 软件工程 一.个人阅读作业+总结 对软件工程的学习做一个总结. 阅读下列关于软件开发本质和开发方法的博客/文章,结合自己在个人项目/结对编程/团 ...

  10. [转帖]技术盛宴 | 关于PoE以太网供电技术详解

    技术盛宴 | 关于PoE以太网供电技术详解 https://smb.pconline.com.cn/1208/12085824.html   [PConline 干货铺]随着物联网技术飞速发展,需要提 ...