最近项目中碰到一个需求，需要前端预览打印当前页面的内容，但是在打印的时候需要分页打印，想了很多办法，最后解决，在这做一个分享。
首先是打印，网上有很多方法，这里面我用的是一个插件 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>

结果如图：

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

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

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

==================更新======================

最近有朋友在看了文章之后，发现有的情况下强制分页没有用，加上 page-break-after:always 之后，打印的时候发现还是一页并没有分页，这里再给大家提供几种解决方法，供大家参考使用。

首先，按照前面说的标签尽量用div，然后注意打印内容中不能有position: absolute等浮动块级元素。
然后第二种方法：大家在用这个插件的时候，可以手动下载插件到本地，插件地址：https://github.com/xyl66/vuePlugs_printjs，然后import 导入，然后用ref指定打印的区域和不要打印的区域（如果有不需要打印的地方的话），例如：

<div ref="print">
 	这里是你要打印的内容
 <div class="no-print">不要打印我</div>
</div>

然后在js里面打印即可

this.$print(this.$refs.print)

另外有可能有一些样式问题，例如在页面中有限定高度（height: 100%之类的）的元素时，可以试一下第三种方法：

在print.js里面加上这句话，可以解决，方便大家直接用，复制下面的代码加上去就行了。

str += "<style>html,body,div{height: auto!important;}</style>"; 

（感谢大家的支持和提供的宝贵意见，大家有什么疑问或者发现有什么问题的，欢迎大家留言或者直接联系我，我会继续完善然后发布出来，大家一起学习！再次谢谢大家！）