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

sywdebug2023-09-14 13:35

使用 html2pdf.js 实现

npmjs 地址：html2pdf.js

github 仓库地址：html2pdf.js

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

安装

复制代码

npm i html2pdf.js

引入

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

复制代码

import html2pdf from "html2pdf.js";

使用

基本配置，页边距，文件名，生成图片类型和质量等信息，自行调整

具体配置项可以看 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" },
};

基本的保存为 PDF 使用流程，使用 html2pdf 导出方法，设置opt导出配置，从node导出节点，保存

其他的工作流的方法可以看 npmjs 的 html2pdf.js#worker-api 或 github 的 html2pdf.js#worker-api

复制代码

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

手动分页

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

复制代码

<div class="html2pdf__page-break"></div>