- Window.print()方法
之前的打印功能,使用的是Window对象,print()方法用于打印当前窗口的内容。所以在vue代码中,我们需要做如下处理:
首先,根据div标签ID拿到div中的局部内容。
其次,把获取的 局部div内容赋给body标签, 相当于重置了 body里的内容。
接着,调用打印功能。
最后,重新给页面内容赋值。
这样,通过id选择器来替换内容打印,再结合之前的分页打印,去掉页眉页脚文档,从而实现分页打印的功能。
弊端:当调用该方法时,打印部分的内容会重置body里的内容,从页面效果上来看,不美观(如下图),且点击取消或打印后,页面会重新加载,从用户角度上来讲,是不方便操作的。
图 1
- vue-printjs插件
为了解决上面方法的弊端,选择使用插件vue-printjs来实现页面的打印功能。
- 安装插件:cnpm i vue-printjs --save-dev
- 下载print.js:
https://github.com/zxc19890923/print/blob/master/print.js
- 在vue中引入插件:
import Print from '@/common/print.js';
Vue.use(Print)
- 使用:
在需要打印的div最外层加ref="print" id="print",在打印方法中加入:
this.$print(this.$refs.print)
- 这种方式只打印一页,所以我们需要手动修改一下print.js文件:
在文件中找到getStyle方法,添加:str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";
getStyle: function () {
var str = "",
styles = document.querySelectorAll('style,link');
for (var i = 0; i < styles.length; i++) {
str += styles[i].outerHTML;
}
str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";
return str;
}
- 对页眉页脚的控制(print为打印部分的id值):
<style media="print">
@page{
size: auto;
margin: 0mm;
}
</style>