使用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');
    }
  }