vue3 将 HTML 网页内容生成为 PDF 文件

使用 html2pdf.js 实现
npmjs 地址：html2pdf.js
github 仓库地址：html2pdf.js

使用 html2pdf.js 的方法非常简单，只需要能获取到要生成 PDF 的 HTML 元素即可

安装

npm i html2pdf.js
1

引入

先在需要使用导出的页面引入

import html2pdf from "html2pdf.js";
1

使用

基本配置，页边距，文件名，生成图片类型和质量等信息，自行调整
具体配置项可以看 npmjs 的 html2pdf.js#Options 或 github 的 html2pdf.js#options

let opt = {
  margin: [0.5, 0.6],
  filename: "文件名",
  image: { type: "jpeg", quality: 0.98 },
  html2canvas: { scale: 3 },
  jsPDF: { unit: "in", format: "letter", orientation: "portrait" },
};
1
2
3
4
5
6
7

基本的保存为 PDF 使用流程，使用 html2pdf 导出方法，设置opt导出配置，从node导出节点，保存
其他的工作流的方法可以看 npmjs 的 html2pdf.js#worker-api 或 github 的 html2pdf.js#worker-api

html2pdf().set(opt).from(node).save();
1

手动分页

在导入的节点内加入下面代码手动分页，在哪个节点后加表示在哪分页

1