html2canvas配合printjs将页面打印出pdf
import html2canvas from 'html2canvas'
import PrintJS from 'print-js'
// 打印类属性、方法定义 给需要打印的加上class.flow-print
/* eslint-disable */
const Print = function (dom, options = {}) {
if(!dom) {
dom = '.flow-print'
}
if ((typeof dom) === "string") {
this.cloneDom = document.querySelector(dom);
} else {
this.isDOM(dom)
this.cloneDom = this.isDOM(dom) ? dom : dom.$el;
}
this.cloneDom
//主要修改:将打印的dom转换成图片
html2canvas(this.cloneDom, {
scale: 2,
backgroundColor: null,
width: this.cloneDom.offsetWidth,
height: this.cloneDom.offsetHeight,
}).then(canvas => {
this.imgmap = canvas.toDataURL("image/png");
const style = '@media print { @page {size: auto; margin: 0; } body{margin:0 5px}}' ; //去除页眉页脚,size设置打印尺寸
PrintJS({
printable: this.imgmap,
width: this.cloneDom.offsetWidth,
height: this.cloneDom.offsetHeight,
type: "image",
maxWidth: 200,
style: style, //去除页眉页脚
...options
})
})
};
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
// 4. 添加实例方法
Vue.prototype.$print = Print
}
export default MyPlugin
import Print from '@/plugins/print'
Vue.use(Print) // 注册打印
通过this.$print()打印