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

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

Logo

前往低代码交流专区

更多推荐