安装配置
npm install vue-print-nb --save
main.js中
// 导入打印插件 import Print from 'vue-print-nb' Vue.use(Print);
.vue页面中使用
<div id="printPage"> 打印内容 </div> <el-button type="primary" v-print="'printConfig'">打印</el-button>
data中定义变量
printConfig:{ id:'printPage', //被打印部分的id popTitle:'打印后，页眉居中的标题' },
必要的样式
<!--打印时添加的样式--> <style scoped media="print"> /*指定打印的分页*/ /deep/ section{ page-break-after:always; } /*避免出现空白尾页*/ html,body,#app{ height: 98% !important; margin: 0px; padding: 0px; } </style>
指定分页
在要进行分页的标签上，添加以下样式即可
page-break-after:always;
例如，给section标签添加此样式，然后使用section标签实现分页
section{ page-break-after: always; }
<div id="printPage"> <section> 第一页的内容 </section> <section> 第二页的内容 </section> <section> 第三页的内容 </section> </div> <el-button type="primary" v-print="'printConfig'">打印</el-button>
移除末尾的空白页
若打印时，末尾总是出现空白页，则存在定义了height:100%的元素，删除掉此样式即可
通常都是因为存在以下样式导致,通常被定义在全局样式文件中，或index.html中
html,body,#app{ height: 100%; }
若有的页面需要此样式，则在对应页面单独添加
