How to realize the printing function of vue

这篇文章主要介绍"vue如何实现打印功能"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"vue如何实现打印功能"文章能帮助大家解决问题。

第一种方法：通过npm 安装插件

1，安装 npm install vue-print-nb --save

2，引入 安装好以后在main.js文件中引入

import Print from 'vue-print-nb' Vue.use(Print); //注册

3，现在就可以使用了

明月照于山间

清风来于江上

打印

4.如需通过链接地址打印：_window.location.href = airway_bill; airway_bill 为链接地址。

5.如果内容打印不全，在打印操作时点击更多设置，然后设置缩放。

第二种方法：手动下载插件到本地

1.在src下新建文件夹plugs,将下载好的print.js放入plugs文件夹下，然后操作如下

import Print from '@/plugs/print'Vue.use(Print) // 注册 打印内容 不要打印我 this.$print(this.$refs.print) // 使用

2.注意事项 需使用ref获取dom节点，若直接通过id或class获取则webpack打包部署后打印内容为空

3.指定不打印区域

方法1. 添加no-print样式类

不要打印我

方法2. 自定义类名

不要打印我this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用批量打印

批量打印这里用的其实就是纯js的写法，直接上代码吧：

{{item.date}}

{{item.name}}

{{item.province}}

{{item.city}}

{{item.address}}

{{item.zip}}

打印 export default { data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-04', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-01', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-08', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-06', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-07', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }] } }, methods: { handlePrint() { var newWin = window.open(""); //新打开一个空窗口 for (var i = 0; i < this.tableData.length; i++) { var imageToPrint = document.getElementById("printDiv" + i); //获取需要打印的内容 newWin.[xss_clean](imageToPrint.outerHTML); //将需要打印的内容添加进新的窗口 } const styleSheet = `li{list-style:none}`; newWin.document.head[xss_clean] = styleSheet; //给打印的内容加上样式 newWin.document.close(); //在IE浏览器中使用必须添加这一句 newWin.focus(); //在IE浏览器中使用必须添加这一句 setTimeout(function() { newWin.print(); //打印 newWin.close(); //关闭窗口 }, 100); } } } .print-ul { width: 600px; list-style: none; border: 1px solid #e8e8e8; }关于"vue如何实现打印功能"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。