使用canvas导出图片或者pdf

HTML:

<el-button size="small" type="primary" :loading="printLoading"  @click="print($el, title, 'pdf')" >下载</el-button>

JS:

此按钮是在el-dialog中，传入的$el可更加实际情况调整。

import html2canvas from 'html2canvas';
import { saveAs } from 'file-saver';
import { jsPDF } from 'jspdf';

methods: {
    /**
     * 导出为图片
     * @param {Object} targetDom 目标DOM元素
     * @param {String} title 导出标题
     * @param {String} type 导出类型（图片或pdf）
     * 若导出的图片中背景颜色有问题,需要调整样式
     */
    print(targetDom, title, type) {
      this.printLoading = true;
      // DOM更改后
      setTimeout(() => {
        // 打印的时候忽略右上角的关闭按钮和最下方的打印报告按钮class类名
        const excludeClass = ['el-dialog__headerbtn', 'footer'];
        html2canvas(targetDom.children[0], {
          backgroundColor: '#fff',
          useCORS: true, //支持图片跨域
          ignoreElements(element) {
            return (
              element.classList &&
              Array.from(element.classList).some((key) =>
                excludeClass.includes(key)
              )
            );
          }
        })
          .then((canvas) => {
            // 方式一：生成图片（避免分页问题）
            if (type === 'pdf') {
              this.createPDF(canvas, title);
            } else {
              canvas.toBlob((blob) => {
                saveAs(blob, `${title}.png`);
              });
            }
          })
          .finally(() => (this.printLoading = false));
      }, 500);
    },
    createPDF(canvas, title) {
      const contentWidth = canvas.width;
      const contentHeight = canvas.height;

      //一页pdf显示html页面生成的canvas高度;
      const pageHeight = (contentWidth / 592.28) * 841.89;
      //未生成pdf的html页面高度
      let leftHeight = contentHeight;
      //页面偏移
      let position = 20;
      //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      const imgWidth = 595.28;
      const imgHeight = (592.28 / contentWidth) * contentHeight;

      const pageData = canvas.toDataURL('image/jpeg', 1.0);

      // pdf实例
      const pdf = new jsPDF('', 'pt', 'a4');

      //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      //当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < pageHeight) {
        pdf.addImage(pageData, 'JPEG', 20, 20, imgWidth - 40, imgHeight - 40);
      } else {
        while (leftHeight > 0) {
          pdf.addImage(
            pageData,
            'JPEG',
            20,
            position,
            imgWidth - 40,
            imgHeight - 40
          );
          leftHeight -= pageHeight;
          position -= 841.89;
          //避免添加空白页
          if (leftHeight > 0) {
            pdf.addPage();
          }
        }
      }
      //输出保存命名为content的pdf
      pdf.save(title + '.pdf');
    }
  }