我們一起來(lái)了解一下如何僅使用 JAVAScript 將任何 html 頁(yè)面或表單轉(zhuǎn)化為 PDF文件。
使用 jspdf 庫(kù)，我們可以輕松地將任何 HTML 頁(yè)面或表單轉(zhuǎn)換為 PDF：
例如：
import { jsPDF } from 'jspdf';
const pdfContentEl = document.getElementById('pdf-content');
const doc = new jsPDF();
await doc.html(pdfContentEl.innerHTML).save('test.pdf');
PDF 是一種流行的文件格式，我們用來(lái)在不同平臺(tái)和設(shè)備上呈現(xiàn)和共享具有固定布局的文檔。
要開(kāi)始轉(zhuǎn)換，我們使用構(gòu)造函數(shù)創(chuàng)建一個(gè)新的 jsPDF 對(duì)象。 然后我們調(diào)用 html() 方法，傳遞包含我們想要在 PDF 中的內(nèi)容的元素。 在結(jié)果上，我們調(diào)用 save()，傳遞我們想要的輸出 PDF 文件的名稱。
假設(shè)我們有這樣的 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>
在網(wǎng)頁(yè)上有這樣的輸出：
當(dāng)我們點(diǎn)擊“保存 PDF”按鈕時(shí)，jsPDF 將從 HTML 元素創(chuàng)建一個(gè)新的 PDF 并將其作為文件下載到瀏覽器中。
這是我們打開(kāi) PDF 時(shí)顯示的內(nèi)容：
安裝 jsPDF
要開(kāi)始使用 jsPDF 庫(kù)，我們可以使用以下命令從 NPM 安裝它：
npm i jspdf
安裝后，我們可以將其導(dǎo)入到 JavaScript 文件中，如下所示：
import { jsPDF } from 'jspdf';
為了讓這個(gè)文件在 HTML 中工作，我們可以使用像 Parcel 這樣的模塊捆綁器，這就是我使用的。
使用 Parcel，我們可以像這樣在 HTML 中包含腳本：
<script type="module" src="index.js"></script>
我們可以在腳本中使用 TypeScript 和 ES 模塊導(dǎo)入等現(xiàn)代工具，并且由于 Parcel，它可以正常工作。
在使用 npm install parcel 安裝 Parcel 之后，我們使用 npx parcel my-file.html 運(yùn)行 HTML。
npm install parcel
npx parcel my-file.html
Parcel 使 HTML 在 localhost:1234 可用，正如您可能在上面的演示中看到的那樣。
自定義 HTML 到 PDF 的轉(zhuǎn)換
jsPDF 構(gòu)造函數(shù)接受一個(gè)自定義 PDF 轉(zhuǎn)換過(guò)程的選項(xiàng)對(duì)象。
例如，方向選項(xiàng)設(shè)置生成的 PDF 的方向。
默認(rèn)情況下，它是縱向的，但我們可以將其設(shè)置為橫向。
自定義 PDF 方向
const doc = new jsPDF({ orientation: 'landscape' });
自定義 PDF 單位和尺寸
使用單位和格式選項(xiàng)，我們可以設(shè)置輸出文件中每個(gè) PDF 頁(yè)面的單位和尺寸。
const doc = new jsPDF({ orientation: 'l', unit: 'in', format: [4, 2] });
此處我們指定 2 x 4 英寸的橫向?qū)С觥?/p>
將 HTML 表單轉(zhuǎn)換為 PDF
jsPDF 還可以處理 HTML 元素，這些元素的外觀可以根據(jù)用戶交互動(dòng)態(tài)變化，例如表單輸入。
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');
});
在網(wǎng)頁(yè)中，我們?cè)趦蓚€(gè)表單輸入中放入了一些測(cè)試值，以查看它們是否顯示在 PDF 輸出中。
PDF:
但是，我們無(wú)法與 PDF 文件中的表單輸入或按鈕進(jìn)行交互。
總結(jié)
jsPDF 庫(kù)提供了一種將 HTML 內(nèi)容（包括表單）轉(zhuǎn)換為 PDF 格式的便捷方式。
整個(gè)過(guò)程非常簡(jiǎn)單，我們可以新建一個(gè)jsPDF對(duì)象，調(diào)用html()方法指定內(nèi)容，然后使用save()方法生成輸出文件。
此外，我們可以使用方向、單位和格式等選項(xiàng)自定義 PDF 輸出。
總的來(lái)說(shuō)，使用 jsPDF 簡(jiǎn)化了在我們的網(wǎng)絡(luò)應(yīng)用程序中從 HTML 內(nèi)容創(chuàng)建 PDF 文件的過(guò)程。
