适用于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 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...
随机推荐
- 20155302《网络对抗》Exp9 Web安全基础
20155302<网络对抗>Exp9 Web安全基础 实验内容 本实践的目标理解常用网络攻击技术的基本原理.Webgoat实践下相关实验. 实验过程 1.webgoat的安装启动 使用自己 ...
- 20155320《网络对抗》Exp4 恶意代码分析
20155320<网络对抗>Exp4 恶意代码分析 [系统运行监控] 使用schtasks指令监控系统运行 首先在C盘目录下建立一个netstatlog.bat文件(由于是系统盘,所以从别 ...
- 20155325 Exp5 MSF基础应用
目录 实验内容 遇到的问题 基础问题问答 老师!!!我实验三的C代码已经删除了,请求评分~~~ 实验内容 1.Windows服务渗透攻击--MS08-067 系统 虚拟机 参考博客 Windows X ...
- 汇编 浮点指令FLD,FSTP,FADD与FPU寄存器
知识点: 浮点数的存放方式 st0至st7 FLD,FST,FADD指令 一.浮点数的存放方式 00401000 /$ 55 PUSH EBP 00401001 |. 8BEC MOV E ...
- MFC CTreeCtrl控件
知识点: 认识CTreeCtrl CTreeCtrl控件属性 CTreeCtrl添加根项 CTreeCtrl添加子项 一.CTreeCtrl控件属性 先设置CTreeCtrl的属性: Has Line ...
- Windows下面的常用的快捷键
最小化的快捷键: 最小化当前窗口:Alt+ESC 还原刚刚最小化的窗口:Alt+Tab(次快捷键组合可以在多个窗口中切换) 显示桌面,切换之前的桌面:Win+D 在浏览器页面之间切换:Ctrl+T ...
- exchange 2010 的两个错误
最近公司要搭建邮件服务器 过程中 碰到两个问题,记录下来. 引以为戒 . 1,登陆界面能出来 但是无论输入什么都显示 乱码.问题原因 身份验证有问题. 如图所示: 改成这个,然后 重启 iis 就可 ...
- Ubuntu命令行运行C程序和C++程序
首先Ctrl + T 打开一个终端,cd到你建立C/C++文件的目录下. 下面以建立 helloc.c 和 hellocpp.cpp 进行演示 vim helloc.c 按 i 进入插入操作,然后写C ...
- Python机器学习/LinearRegression(线性回归模型)(附源码)
LinearRegression(线性回归) 2019-02-20 20:25:47 1.线性回归简介 线性回归定义: 百科中解释 我个人的理解就是:线性回归算法就是一个使用线性函数作为模型框架($ ...
- BugPhobia准备篇章:Scrum Meeting工作分析篇
特别说明:此博客不计入正式开发过程的Scrum Meeting篇章,只是工作的基础分析 前端 王鹿鸣.钱林琛撰写初稿 能否前端完成一个页面后就能在本地跑起来进行测试? 能否在前端和后端完成对接后单页面 ...