js一键批量打印_前端vue项目实现批量打印功能

在项目中遇到一个问题需要实现单页打印和批量打印功能，研究了测试了一番解决了，把相关的功能记录下，方便自己以后查阅，本项目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的写法，直接上代码吧：

• :id="'printDiv' + index" style="pag