一、使用环境

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

四、工具地址

最新文章

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

热门文章

  1. cordova第三方插件的创建,修改以及调试指南---真机调试,浏览器调试
  2. angular组件共用服务打印日志父子组件传值2创建服务注入
  3. Translent关键字-InvalidClassException异常_原理和解决方案
  4. vue学习笔记(一) ---- vue指令(总体大纲)
  5. java画海报
  6. 重定向Kubernetes pod中的tcpdump输出
  7. 重学SpringBoot. step4 Redis的应用
  8. C++_bind用法
  9. 学习Java Day8
  10. 【KAWAKO】从mac上定时将腾讯云的数据备份到本地