前端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 文件的名称。

假设我们有这样的 H自定义 PDF 方向TML：

  <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>

安装 jsPDF

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

npm i jspdf

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

import { jsPDF } from 'jspdf';

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

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

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

自定义 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');
});

链接：https://blog.csdn.net/LuckyWinty/article/details/130737917