页面导出为PDF
2024-10-20 08:32:26
一、使用环境
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);
},
},
四、工具地址
最新文章
- GJM :用JIRA管理你的项目(二)JIRA语言包支持及插件支持 [转载]
- 一种map容器遍历的方法
- iOS基础
- angularjs 选项卡 --- 自定义属性
- node-odata: 基于 NodeJS 的 REST 框架
- java面试题小全
- debian7安装oracle11g
- 安卓项目-利用Sqlite数据库,开发新闻发布系统
- 【winform程序】自定义webrowser控件调用IE的版本
- Eclipse安装反编译插件JD(Java Decompiler)
- CodeForces 377B---Preparing for the Contest(二分+贪心)
- jQuery自定义右键菜单
- 读阿里巴巴Java开发手册v1.2.0之工程结构有感【架构篇】
- PCI9054芯片的型号说明及购买建议
- Tuple Class
- C#自定义控件:如果定义控件的事件
- 未能正确加载包“Microsoft.Data.Entity.Design.Package.MicrosoftDataEntityDesignPackage(转)
- 关于easyui combobox下拉框实现多选框的实现
- P4281 [AHOI2008]紧急集合 / 聚会
- CSS3屏幕密集媒体查询