如何仅使用 JavaScript 将任何 HTML 页面或表单转化为 PDF文件

前端Q

我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～

公众号

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

英文 | 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 输出中。

PDF:

但是，我们无法与 PDF 文件中的表单输入或按钮进行交互。

总结

jsPDF 库提供了一种将 HTML 内容（包括表单）转换为 PDF 格式的便捷方式。 

整个过程非常简单，我们可以新建一个jsPDF对象，调用html()方法指定内容，然后使用save()方法生成输出文件。 

此外，我们可以使用方向、单位和格式等选项自定义 PDF 输出。 

总的来说，使用 jsPDF 简化了在我们的网络应用程序中从 HTML 内容创建 PDF 文件的过程。

最后，感谢你的阅读。

往期推荐

我放弃 Axios，改用 Alova

什么是 ”无渲染组件“ ？

再也不用手动改package.json的版本号

最后

• 欢迎加我微信，拉你进技术群，长期交流学习...
  

• 欢迎关注「前端Q」,认真学前端，做个专业的技术人...

前端Q

本公众号主要分享一些技术圈(前端圈为主)相关的技术文章、工具资源、学习资料、招聘信息及其他有趣的东西...

公众号

点个在看支持我吧