如何使用JS将 HTML 页面或表单转化为 PDF文档

前端达人

发布于 2023-08-31 08:55:29

4370

发布于 2023-08-31 08:55:29

文章被收录于专栏：前端达人

英文 | https://medium.com/coding-beauty/javascript-convert-html-to-pdf-99851d36e1cd

使用 jspdf 库，我们可以轻松地将任何 HTML 页面或表单转换为 PDF：

例如：

import { jsPDF } from 'jspdf';

const pdfContentEl = document.getElementById('pdf-content');

const doc = new jsPDF();

await doc.html(pdfContentEl.innerHTML).save('test.pdf');

PDF 是一种流行的文件格式，我们用来在不同平台和设备上呈现和共享具有固定布局的文档。

要开始转换，我们使用构造函数创建一个新的 jsPDF 对象。然后我们调用 html() 方法，传递包含我们想要在 PDF 中的内容的元素。在结果上，我们调用 save()，传递我们想要的输出 PDF 文件的名称。

假设我们有这样的 HTML：

<div id="pdf-content">
  <h1>Test</h1>
  <p>Here's what we're saving to PDF</p>
</div>
<button id="save-pdf">Save PDF</button>

在网页上有这样的输出：

当我们点击“保存 PDF”按钮时，jsPDF 将从 HTML 元素创建一个新的 PDF 并将其作为文件下载到浏览器中。

这是我们打开 PDF 时显示的内容：

安装 jsPDF

要开始使用 jsPDF 库，我们可以使用以下命令从 NPM 安装它：

npm i jspdf

安装后，我们可以将其导入到 JavaScript 文件中，如下所示：

import { jsPDF } from 'jspdf';

为了让这个文件在 HTML 中工作，我们可以使用像 Parcel 这样的模块捆绑器，这就是我使用的。

使用 Parcel，我们可以像这样在 HTML 中包含脚本：

<script type="module" src="index.js"></script>

我们可以在脚本中使用 TypeScript 和 ES 模块导入等现代工具，并且由于 Parcel，它可以正常工作。

在使用 npm install parcel 安装 Parcel 之后，我们使用 npx parcel my-file.html 运行 HTML。

npm install parcel

npx parcel my-file.html

Parcel 使 HTML 在 localhost:1234 可用，正如您可能在上面的演示中看到的那样。

自定义 HTML 到 PDF 的转换

jsPDF 构造函数接受一个自定义 PDF 转换过程的选项对象。

例如，方向选项设置生成的 PDF 的方向。

默认情况下，它是纵向的，但我们可以将其设置为横向。

自定义 PDF 方向

const doc = new jsPDF({ orientation: 'landscape' });

自定义 PDF 单位和尺寸

使用单位和格式选项，我们可以设置输出文件中每个 PDF 页面的单位和尺寸。

const doc = new jsPDF({ orientation: 'l', unit: 'in', format: [4, 2] });

此处我们指定 2 x 4 英寸的横向导出。

将 HTML 表单转换为 PDF

jsPDF 还可以处理 HTML 元素，这些元素的外观可以根据用户交互动态变化，例如表单输入。

HTML:

<form id="form">
  <input type="email" name="email" id="email" placeholder="Email" />
  <br />
  <input
    type="password"
    name="password"
    id="password"
    placeholder="Password"
  />
  <br /><br />
  <button type="submit">Submit</button>
</form>
<br />
<button id="save-pdf">Save PDF</button>

JavaScript:

import { jsPDF } from 'jspdf';

const doc = new jsPDF();
const savePdf = document.getElementById('save-pdf');
const formEl = document.getElementById('form');
savePdf.addEventListener('click', async () => {
  await doc.html(formEl).save('test.pdf');
});

在网页中，我们在两个表单输入中放入了一些测试值，以查看它们是否显示在 PDF 输出中。