vue部分打印（多页自动分页、打印样式自定义、多页打印表格页面顶部带表头）

写在前面：注意打印表格时，若需要多页打印，则尽量使用原生table元素实现，这样在分页时每页顶部会带有表头，用户体验比较好

一、引用插件（在 main.js 中全局引入！！注意，需要修改源码，所以尽量下载依赖到本地）

插件地址：https://github.com/xyl66/vuePlugs_printjs

import './style/print.scss'
import Print from '@/libs/print.js'
Vue.use(Print);

在js依赖里面找到这个方法，添加如下备注所示的一行代码

  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;
  }

二、调用方法

<div>
  <div @click="printContent">打印</div>
  <div ref="print-content">
    <slot></slot>
  </div>
</div>

因为业务需要，所有table均需要打印，所以封装了组件，table统一放在slot里，打印时取自己想打印的区域即可

printContent() {
   this.$print(this.$refs['print-content'])
},

三、设置打印样式

@media print {
 // 这里写自己需要的样式
}

以上就可以实现vue部分打印页面啦~