在项目中遇到一个问题需要实现单页打印和批量打印功能，研究了测试了一番解决了，把相关的功能记录下，方便自己以后查阅，本项目vue cli3环境下的，其他的前端框架也是类似的：

一、单页打印

vue-print-nb插件：这是用于打印，简单，快速，方便，轻便的指令包装。

安装：

npm install vue-print-nb --save

在main.js全局引入注册(也可在组件引入)：

import Print from 'vue-print-nb'

Vue.use(Print);

在需要打印的页面元素上加上id值

打印

export default {

data() {

printObj: {

id: "printTest", //打印页面的id

popTitle: 'good print', //打印的标题

endCallback() //打印成功后的回调

}

}

}

一、批量打印

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

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.document.write(imageToPrint.outerHTML); //将需要打印的内容添加进新的窗口

}

const styleSheet = ``;

newWin.document.head.innerHTML = 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;

}