【无标题】

1. Window.print()方法

之前的打印功能，使用的是Window对象，print()方法用于打印当前窗口的内容。所以在vue代码中，我们需要做如下处理：

 

首先，根据div标签ID拿到div中的局部内容。

其次，把获取的 局部div内容赋给body标签, 相当于重置了 body里的内容。

接着，调用打印功能。

最后，重新给页面内容赋值。

这样，通过id选择器来替换内容打印，再结合之前的分页打印，去掉页眉页脚文档，从而实现分页打印的功能。

弊端：当调用该方法时，打印部分的内容会重置body里的内容，从页面效果上来看，不美观（如下图），且点击取消或打印后，页面会重新加载，从用户角度上来讲，是不方便操作的。

 

图 1

1. vue-printjs插件

为了解决上面方法的弊端，选择使用插件vue-printjs来实现页面的打印功能。

1. 安装插件：cnpm i vue-printjs --save-dev
2. 下载print.js:

https://github.com/zxc19890923/print/blob/master/print.js

1. 在vue中引入插件：

import Print from '@/common/print.js';

Vue.use(Print)

1. 使用：

在需要打印的div最外层加ref="print" id="print"，在打印方法中加入：

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

1. 这种方式只打印一页，所以我们需要手动修改一下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;

 }

1. 对页眉页脚的控制（print为打印部分的id值）：

<style media="print">

    @page{

        size: auto;

        margin: 0mm;

    }

</style>