页面导出为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);
    },
  },
复制代码

四、工具地址

 

posted @   Wmt0927  阅读(287)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
点击右上角即可分享
微信分享提示