一、使用環境

Vue3、Quasar、Electron

二、安裝jspdf-html2canvas

npm install jspdf-html2canvas --save

安裝失敗可以選擇cnpm安裝

三、引入

在使用匯出功能的頁面中引入：

import html2PDF from "jspdf-html2canvas";

匯出內容：

<div id="Property">
       <!-- 具體匯出內容 -->
</div>

匯出方法：

methods: {
    Export() {
      let pdfhtml = document.querySelector("#Property"); //
 
 獲取需要儲存的 dom節點 會自動分頁
      //let pdfhtml = document.querySelector(".pdfDiv"); // 以類的形式匯出 PDF，會進行每個類的分頁
      const options = {
        image: { type: "image/jepg", quality: 1 },
        jsPDF: { unit: "px", format: "a4", orientation: "p" },//以畫素形式，列印為A4大小，列印方向為豎直，orientation: "p",豎排， "l",橫排
        margin: { top: 20, left: 20, right: 20, bottom: 40 },//
 
頁面上下左右外邊距
        pagebreak: {
          before: ".beforeClass",
          after: ["#after1", "#after2"],
          avoid: "img",
        },
        html2canvas: {
          scale: 2,
          imageTimeout: 15000,
          logging: true,
          useCORS: false,
        },
        output: "××××.pdf", //
 
 匯出檔名××××
      };
      html2PDF(pdfhtml, options);
    },
  },

四、工具地址