页面导出为PDF

一、使用环境

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);
    },
  },

四、工具地址

https://www.npmjs.com/package/jspdf-html2canvas