页面导出为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);
},
},
四、工具地址
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求