此方法只适用于现代浏览器,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. React Native移动开发实战-5-Android平台的调试技巧

    Android平台的调试和其他平台的调试也很类似,例如:在Android Studio打开的工程中,打开源码MainActivity.java,然后,将鼠标移至代码编辑区的左侧后,单击鼠标即可添加断点 ...

  2. Cocos2dx源码赏析(3)之事件分发

    Cocos2dx源码赏析(3)之事件分发 这篇,继续从源码的角度赏析下Cocos2dx引擎的另一模块事件分发处理机制.引擎的版本是3.14.同时,也是学习总结的过程,希望通过这种方式来加深对Cocos ...

  3. Swagger本地环境配置

    一.技术背景 随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染.先后端分离的形态,而且前端技术和后端技术在各自的道路上越走越远.而前后端的唯一联系便是 API 接口,与此同 ...

  4. Golang 2018.1.2激活及使用技巧

    对于做Java开发的同学使用最熟练的开发工具应该当属Eclipse了吧,但是做到后面的话一般都会转用Intellij Idea.至于转用Intellij有什么好处我就不赘述了,简言之就是功能强大,使用 ...

  5. python清空列表的方法

    1.大数据量的list,要进行局部元素删除,尽量避免用del随机删除,非常影响性能,如果删除量很大,不如直接新建list,然后用下面的方法释放清空旧list. 2.对于一般性数据量超大的list,快速 ...

  6. (转)Django配置数据库读写分离

    转:https://blog.csdn.net/Ayhan_huang/article/details/78784486 转:http://www.cnblogs.com/dreamer-fish/p ...

  7. 2017年第八届蓝桥杯【C++省赛B组】

    1.标题: 购物单 小明刚刚找到工作,老板人很好,只是老板夫人很爱购物.老板忙的时候经常让小明帮忙到商场代为购物.小明很厌烦,但又不好推辞. 这不,XX大促销又来了!老板夫人开出了长长的购物单,都是有 ...

  8. C# Js 时间格式化问题

    C# 后台: .ToString("dd-MMM-yyyy", System.Globalization. DateTimeFormatInfo.InvariantInfo) eg ...

  9. 使用switchPage.js插件jQuery全屏滚动翻页

    1. 先引入jquery.js,再引入switchPage.js 文件地址:点击打开链接 <script src="jquery.min.js"></script ...

  10. beat冲刺(5/7)

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(5/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 ppt制作中 数据集标注 接下来的计划 制作p ...