适用于vue项目的打印插件(转载)
出处: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项目的打印插件(转载)的更多相关文章
- 适用于vue项目的打印插件
此方法只适用于现代浏览器,IE10以下就别用了 // 使用时请尽量在nickTick中调用此方法 //打印 export default (refs, cb) => { let cloneN i ...
- 创建vue项目及引入插件
部署开发环境 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack cnpm install ...
- scss/less语法以及在vue项目中的使用(转载)
1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...
- vscode 中 vue项目使用eslint插件 检查代码
前言 本文章项目由vue-cli3创建 vscode版本1.36.1 eslint1.9.0 在网上找了一大堆文章,不知是什么原因,没有一篇可以直接使用的 折腾了许久,直接按eslint插件的说明,竟 ...
- vue项目中使用插件将字符串装化为格式化的json数据(可伸缩)
插件地址:https://www.npmjs.com/package/vue-json-viewer 第一步:安装vue-json-viewer插件 $ npm install vue-json-vi ...
- vue项目使用vue-photo-preview插件实现点击图片放大预览和移动
官方链接: http://npm.taobao.org/package/vue-photo-preview # 安装 npm install vue-photo-preview --save # 引入 ...
- vue项目 预览照片的插件 v-viewer
查看图片主要使用的旋转.翻转.缩放.上下切换.键盘操作等功能都有. 1.首先是安装 npm install v-viewer --save 2.安装完在main.js里面引用(还要记得引用它的css样 ...
- HTML5 Canvas圆盘抽奖应用(适用于Vue项目)
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现
一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...
随机推荐
- Data Consistency Primer
云应用通常来说,使用的数据很多都是分散的,来自不同的数据仓库.在这种环境下,管理和保持数据一致性是很复杂的,无论是在并发跟可用性上都可能出问题.开发者有的时候就需要为了强一致性而牺牲可用性了.这也就意 ...
- DeepFM算法解析及Python实现
1. DeepFM算法的提出 由于DeepFM算法有效的结合了因子分解机与神经网络在特征学习中的优点:同时提取到低阶组合特征与高阶组合特征,所以越来越被广泛使用. 在DeepFM中,FM算法负责对一阶 ...
- CS50.5
函数,全局变量,参数,返回值. 1,类型转换. 各种数据类型进行转换 2,API函数 应用程序编程接口. application programming interface 写写随笔吧,先说计算机.. ...
- git 报错 error: insufficient permission for adding an object to repository database ./objects
参照:http://stackoverflow.com/questions/1918524/error-pushing-to-github-insufficient-permission-for-ad ...
- linux systemctl 命令
目录 预热 管理单个 unit 查看系统上的 unit 管理不同的操作环境(target unit) 检查 unit 之间的依赖性 相关的目录和文件 systemctl daemon-reload 子 ...
- 能帮我们学习吉他的音乐软件——Guitar Pro
Guitar Pro是一款十分好用的吉他软件,也是目前广大音乐爱好者最喜欢的多音轨的音谱编辑软件.支持MIDI.MusicXML.PTB.GTP等多种格式文件的导入/导出. Guitar Pro 7. ...
- ats 安全
Controlling Access ats可以配置为仅允许某些客户端使用代理缓存. 1. 为ip_allow.config添加一行,以获取允许访问ats的每个IP地址或IP地址范围; 2. traf ...
- 二叉树 c++
树 非空树 有一个(root)根节点r 其余节点可分为m个互不相交的有限集(子树)T1....Tm 具有n个节点的树,具有(n-1)条连接(指针域),需要构成结构体,尽可能减少空间域的浪费,使用儿子兄 ...
- 【zigbee 】2.4G信号发放器 AT2401C PA功放
概述 AT2401C 是一款面向Zigbee,无线传感网络以及其他2.4GHz 频 段无线系统的全集成射频功能的射频前端单芯片.AT2401C 是采用 CMOS 工艺实现的单芯片器件,其内部集成了功率 ...
- dtcp格式定义
common name type optional comment id string y Content id version string y DTCP version. "1.0&qu ...