vue 打印,vue前端打印
在项目中，有时需要打印页面的表格，所以下面文章主要介绍两种实现vue打印功能的方法，以及批量打印的完整代码，供大家参考。
第一种方法：通过npm 安装插件
1.安装NPM安装vue-打印-注意-保存。
2.安装简介后，在main.js文件中介绍。
从 vue-print-nbVue.use(Print)导入打印；//寄存器
3.现在可以用了。
div id=printTest
p月亮照耀着群山/p
p微风来自河流/p
/div
按钮v-print=#printTest 打印/按钮
4.如果需要通过链接打印地址：window . location . href=airway _ bill；Airway_bill是链接地址。
5.如果内容没有完全打印，请在打印操作过程中单击更多设置，然后设置缩放比例。
第二种方法：手动下载插件到本地
插件地址：
https://github.com/xyl66/vuePlugs_printjs
1.在src下新建一个文件夹plugs，将下载的print.js放入plugs文件夹，然后操作如下
从“@/plugs/print”导入打印内容
Vue.use(Print) //注册
模板
section ref=print
打印内容
不打印不要打印我/div
/部分
/模板
这个。$ print(这个。$ refs . print)//使用
2.注意：需要使用ref来获取dom节点。如果直接通过id或class获取DOM节点，那么webpack打包部署后打印出来的内容将是空的。
3.指定非打印区域。
1.添加非打印样式类。
不打印不要打印我/div
2.自定义类名
不要打印我，不要打印我。$ print(这个。$ refs.print，{no-print :。do-not-print-me-XXX })//使用
批量打印
这里批量打印用的其实是纯js编写。直接进入代码：
模板
差异
ul class=print-ul
li v-for=(item，index) of tableData :key=index
:id= print div index style= page-break-after:always；
差异
p{{item.date}}/p
p{{item.name}}/p
p{{item.province}}/p
p{{item.city}}/p
p{{item.address}}/p
p{{item.zip}}/p
/div
/李
/ul
div @ click= handle print print/div
/div
/模板
脚本
导出默认值{
data() {
返回{
表数据：[{
日期：“2016年5月3日”，
姓名：“王小虎”，
省份：“上海”，
城市：普陀区，
地址：“上海市普陀区金沙江路1518弄”，
邮政编码：200333
}, {
日期：“2016年5月2日”，
姓名：“王小虎”，
省份：“上海”，
城市：普陀区，
地址：“上海市普陀区金沙江路1518弄”，
邮政编码：200333
}, {
日期：“2016年5月4日”，
姓名：“王小虎”，
省份：“上海”，
城市：普陀区，
地址：“上海市普陀区金沙江路1518弄”，
邮政编码：200333
}, {
日期：“2016年5月1日”，
姓名：“王小虎”，
省份：“上海”，
城市：普陀区，
地址：“上海市普陀区金沙江路1518弄”，
邮政编码：200333
}, {
日期：“2016年5月8日”，
姓名：“王小虎”，
省份：“上海”，
城市：普陀区，
地址：“上海市普陀区金沙江路1518弄”，
邮政编码：200333
}, {
日期：“2016年5月6日”，
姓名：“王小虎”，
省份：“上海”，
城市：普陀区，
地址：“上海市普陀区金沙江路1518弄”，
邮政编码：200333
}, {
日期：“2016年5月7日”，
姓名：“王小虎”，
省份：“上海”，
城市：普陀区，
地址：“上海市普陀区金沙江路1518弄”，
邮政编码：200333
}]
}
},
方法：{
handlePrint() {
var new win=window . open( )；//打开一个新的空窗口
for(var I=0；I this . table data . length；i ) {
var imageto print=document . getelementbyid( print div I)；//获取需要打印的内容
new win . document . write(imageto print . outer html)；//将要打印的内容添加到新窗口中
}
const style sheet=` style Li { list-style:none }/style `；
new win . document . head . innerhtml=style sheet；//为打印内容添加样式
new win . document . close()；//在IE浏览器中使用时必须加上这句话
new win . focus()；//在IE浏览器中使用时必须加上这句话
setTimeout(function() {
new win . print()；//打印
new win . close()；//关闭窗口
}, 100);
}
}
}
/脚本
风格。打印-ul {
宽度：600px
列表样式：无；
边框：1px纯色# e8e8e8
}
/风格
总结
关于vue打印功能实现的这篇文章到此为止。有关vue打印功能的更多信息，请搜索我们之前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。