前端el-table导出pdf

1、首先来看下效果图

 2、使用技术：html2Canvas、JsPDF插件，mode_modules下载两个插件

npm  i  html2Canvas  JsPDF

其中，html2Canvas 负责把html转为图片，JsPDF负责把图片转为pdf文件

3、点击按钮触发打印事件

//点击按钮触发打印事件
button @click='htmlToPdf(节点ID',文件名')'>print

//传入打印节点，文件名,然后调用打印事件
htmlToPdf(domName, title) {
  this.downloadPDF(domName, title)
},







//主要代码
downloadPDF(domName, title) {
  window.pageYoffset = 0;
  document.documentElement.scrollTop = 0;
  document.body.scrollTop = 0;

  // 水印
  const can = this.waterMark()

    const el = document.getElementById(domName);
    return new Promise((resolve, reject) => {
      const ele = document.getElementById(domName);
  
      let eleW = ele.offsetWidth+20; // 获得该容器的宽
      //   let eleH = ele.offsetHeight // 获得该容器的高
      let eleH = ele.offsetHeight; // 获得该容器的高
      let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离
      let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
      var canvas = document.createElement("canvas");
      let scaleBy = window.devicePixelRatio > 1 ? window.devicePixelRatio : 1;
      canvas.width = eleW * 2; // 将画布宽&&高放大两倍
      canvas.height = eleH * 2;
      var context = canvas.getContext("2d");
      context.scale(2, 2);
      //  context.translate(-offsetLeft - abs, -offsetTop);
      var opts = {
        scale: 2,//解决pdf不清晰问题
        // canvas: canvas,
        width: eleW,
        height: eleH,
        // logging :true,
        useCORS: true,
        background: "#FFF",
        allowTaint: false,
        // dpi: 300,
        dpi: window.devicePixelRatio * 2,
        // scale: window.devicePixelRatio * 2,
      };
  
      html2Canvas(el