此方法只适用于现代浏览器,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. 程序设计 之 C#实现《拼图游戏》 (上)代码篇

    原理详解请参考博客中 拼图游戏(下)原理篇 http://www.cnblogs.com/labixiaohei/p/6713761.html 功能描述: 1.用户自定义上传图片 2.游戏难度选择:简 ...

  2. 投稿007期|令人震惊到发指的PyObject对象代码设计之美

    前言 最近在重温经典漫画<SlamDunk>的全国大赛篇,其中的一个情形可以很好的诠释虎躯一震这个状态——当樱木看到流川枫一次高难度投篮时内心的感受:“经过两万次射球练习后,樱木首次明白到 ...

  3. C++多态深入分析!

    以下分析是基于VS2010的.以后会使用G++分析看看G++如何处理多态! // polymorphic_test.cpp : 定义控制台应用程序的入口点. // /** 特别注意:实现C++多态,除 ...

  4. 20162314 《Program Design & Data Structures》Learning Summary Of The Second Week

    20162314 2017-2018-1 <Program Design & Data Structures>Learning Summary Of The Second Week ...

  5. 我对git的认识

    Git 真的是不了解 也没听说过git 所以真的不知道从何谈起 所以就参考度娘啦! Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.Git 是 Linus To ...

  6. 树莓派与Arduino Leonardo使用NRF24L01无线模块通信之基于RF24库 (五) 树莓派单子节点发送数据

    本项目中各个节点和树莓派的通信不区分信道,因此如果由树莓派发送给特定节点的数据会被所有节点接收到,因此子节点可以判别该数据是否发给自己的,需要在数据的第二个字节中加入目标节点的编号(第一个字节为源节点 ...

  7. angularJS1笔记-(3)-购物车增删改查练习

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. Profibus基础知识学习——报文

    转自:http://bbs.ednchina.com/BLOG_ARTICLE_3031246.HTM Profibus DP通讯协议简单介绍 一. 首先,Profibus DP通讯协议是一种单一的. ...

  9. 解决nginx+uWSGI部署Django时遇到的static文件404的问题

    昨天是利用Django自带的runserver部署的服务器,但是由于runserver比较不稳定,因此决定采用uWSGI+nginx进行部署. 昨天已经安装好了uwsgi和nginx,使用该指令打开8 ...

  10. Delphi控件-复合控件【转】

    复合控件复合控件是Delphi控件中非常重要的一种控件,复合控件就是将两个或两个以上的控件重新组合成一个新的控件.例如TspinEdit.TlabeledEdit.TDBNavigator等就是复合控 ...