标签：printjs dom 打印 html2canvas Print cloneDom print 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。