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()打印