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 = '@page {margin:0mm 0mm;size: 148mm 210mm;} ' ;  //去除页眉页脚，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()打印

标签：printjs,dom,打印,html2canvas,Print,cloneDom,print,pdf
来源： https://www.cnblogs.com/zerofan/p/16669298.html