使用 jspdf 庫，我們可以輕松地將任何 HTML 頁面或表單轉換為 PDF：

網站設計制作過程拒絕使用模板建站；使用PHP+MYSQL原生開發(fā)可交付網站源代碼;符合網站優(yōu)化排名的后臺管理系統(tǒng)；成都網站設計、做網站收費合理；免費進行網站備案等企業(yè)網站建設一條龍服務.我們是一家持續(xù)穩(wěn)定運營了十載的創(chuàng)新互聯(lián)建站網站建設公司。

例如：

import { jsPDF } from 'jspdf';


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


const doc = new jsPDF();


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

PDF 是一種流行的文件格式，我們用來在不同平臺和設備上呈現(xiàn)和共享具有固定布局的文檔。

要開始轉換，我們使用構造函數創(chuàng)建一個新的 jsPDF 對象。 然后我們調用 html() 方法，傳遞包含我們想要在 PDF 中的內容的元素。 在結果上，我們調用 save()，傳遞我們想要的輸出 PDF 文件的名稱。

假設我們有這樣的 HTML：

  
Test

  
Here's what we're saving to PDF


Save PDF

在網頁上有這樣的輸出：

當我們點擊“保存 PDF”按鈕時，jsPDF 將從 HTML 元素創(chuàng)建一個新的 PDF 并將其作為文件下載到瀏覽器中。

這是我們打開 PDF 時顯示的內容：

安裝 jsPDF

要開始使用 jsPDF 庫，我們可以使用以下命令從 NPM 安裝它：

npm i jspdf

安裝后，我們可以將其導入到 JavaScript 文件中，如下所示：

import { jsPDF } from 'jspdf';

為了讓這個文件在 HTML 中工作，我們可以使用像 Parcel 這樣的模塊捆綁器，這就是我使用的。

使用 Parcel，我們可以像這樣在 HTML 中包含腳本：

我們可以在腳本中使用 TypeScript 和 ES 模塊導入等現(xiàn)代工具，并且由于 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 元素，這些元素的外觀可以根據用戶交互動態(tài)變化，例如表單輸入。

HTML:

  
  

      type="password"
    name="password"
    id="password"
    placeholder="Password"
  />
  


  Submit



Save PDF

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 內容創(chuàng)建 PDF 文件的過程。

當前文章：如何僅使用JavaScript將任何HTML頁面或表單轉化為PDF文件
分享路徑：http://www.5511xx.com/article/cdhgjhd.html