vue 打印(分页打印)

最近项目中碰到一个需求,需要前端预览打印当前页面的内容,但是在打印的时候需要分页打印,想了很多办法,最后解决,在这做一个分享。
首先是打印,网上有很多方法,这里面我用的是一个插件 vue-print-nb --save,使用起来比较方便(缺点是不兼容IE,所以考虑兼容IE浏览器的小伙伴慎用)。
1.安装,直接通过npm安装 npm install vue-print-nb --save
2.安装完之后再main.js文件中引入,注册。

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

3.接下来就可以直接使用了。

<div id="printTest" >
  <p>这里面是要打印的内容</p>   
</div>
<button v-print="'#printTest'">打印</button>

结果如图:
vue 打印(分页打印)
点击更多设置可以设置缩放,页眉页脚等。
最后需求又让分页打印,没办法,又去网上搜了好久,最后看有大神说css的 page-break-after:always 可以强制分页
代码如下:

<div style="page-break-after:always">我是第一个分页</div>
<div style="page-break-after:always">我是第二个分页</div>

最后试了一下,完美解决,需要注意点是,这个属性最好用在 div 标签上,在 span 等标签上可能会有问题。