写在前面：注意打印表格时，若需要多页打印，则尽量使用原生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部分打印页面啦~
