HTML轉換到PDF的三種方式

banq發表於2024-03-18

許多應用程式和環境中的一個常見要求是將 HTML 轉換為 PDF。下面列出了需要將 HTML 轉換為 PDF 的一些原因:

  • 維護內容和佈局: HTML 提供了一種動態且適應性強的方式來在網路上傳遞內容,但其外觀可能會在各種硬體和瀏覽器組合上發生變化。您可以透過將 HTML 轉換為 PDF 來保持所需的設計,確保內容和佈局在所有平臺上保持一致。
  • 文件共享和分發: PDF 是一種廣泛使用的格式。無論其他人使用什麼軟體或裝置,您都可以透過將 HTML 轉換為 PDF 輕鬆地與他們共享論文。
  • 法律和官方檔案:合同、發票、報告和其他官方檔案通常以 PDF 格式建立。透過將 HTML 轉換為 PDF,您可以建立符合法律要求且易於簽名、蓋章或歸檔的專業文件。
  • 批處理和自動化:透過以程式設計方式將 HTML 轉換為 PDF,自動建立文件。當需要根據資料庫或其他來源的資訊動態生成發票、報告或證書時,這非常有用。
  • 列印和離線訪問:無需計算機即可列印、輕鬆儲存和檢視 PDF 檔案。使用者可以透過將 HTML 轉換為 PDF,下載和列印 Web 內容以供參考、存檔或與無法訪問網際網路的其他人共享。

總體而言,將 HTML 轉換為 PDF 提供了一種可靠且靈活的方法來呈現、共享和歸檔內容,同時保持跨多個平臺和裝置的一致性、可訪問性和可移植性。

需要 HTML 到 PDF 轉換的典型情況
在許多典型情況下,將 HTML 轉換為 PDF 是必要的。以下是一些例子:

  • Web 到 PDF 轉換:許多網站和 Web 應用程式都提供將網頁或特定資訊轉換為 PDF 格式的選項。想要儲存文章、部落格文章或其他網際網路內容以供離線閱讀或存檔的使用者會發現這很有幫助。
  • 發票和賬單:在電子商務和財務系統中,經常需要將 HTML 發票或賬單轉換為 PDF。它可以建立具有專業外觀的發票,並且可以輕鬆與客戶共享、列印以儲存記錄或作為附件透過電子郵件傳送。
  • 數字出版:為了向使用者分發文章、電子書和雜誌,出版商經常將基於 HTML 的內容轉換為 PDF 格式。PDF 檔案提供一致的閱讀體驗,可以輕鬆地在多個平臺和裝置之間下載、列印或共享。
  • 文件和使用者手冊:為了更簡單地分發和離線訪問,基於 HTML 的文件、使用者指南和手冊可以轉換為 PDF。PDF 檔案是行動式的,可以在各種裝置上檢視,無需專門的軟體或網際網路連線。
  • 法律和合規文件:在法律合規性至關重要的領域,HTML 到 PDF 的轉換至關重要。透過將合同、協議、法律表格和其他文件轉換為 PDF,通常可以保留文件的完整性,包括格式、簽名和其他重要組成部分。
  • 電子郵件活動: HTML 電子郵件可以轉換為 PDF,以建立靜態電子郵件活動以供離線檢視或儲存。這可用於建立重要電子郵件通訊的可列印副本或用於跟蹤和記錄儲存目的。
  • 報告建立:為業務或資料分析建立報​​告有時涉及將 HTML 轉換為 PDF。當報表內容從 HTML 轉換為 PDF 時,報表的佈局、格式和視覺化元件都會保留。HTML 提供了一種通用的方法來構建和設計報表內容的樣式。

這些只是少數例項,但 HTML 到 PDF 轉換可以在各種設定和部門的任何地方使用,將 Web 內容傳輸為標準化和行動式格式。

將 HTML 轉換為 PDF 的優點
在各種設定中將 HTML 轉換為 PDF 有幾個優點和好處。一些主要好處如下:

  • 一致的格式: HTML 頁面具有不同的佈局和格式,具體取決於用於檢視它們的瀏覽器和裝置。無論使用什麼平臺或軟體檢視 PDF 文件,將 HTML 轉換為 PDF 都能確保內容、格式和樣式保持不變。
  • 保留佈局:由於 PDF 使用固定佈局,因此頁面上的所有專案都位於相同的位置。為了確保頁面按預期顯示,您可以將 HTML 轉換為 PDF 並保持資訊的精確排列,包括影像、表格和其他視覺功能。
  • 平臺和裝置獨立性:無需在各種硬體和作業系統上使用特定軟體或外掛即可檢視 PDF 檔案。這有利於跨多個平臺的文件分發和共享,保持相容性和可訪問性。
  • 離線可訪問性:無需網際網路連線即可下載和閱讀 PDF 檔案,從而允許使用者檢視材料並與之互動。當使用者需要在旅途中或在網際網路不穩定的地方訪問資訊或參考資料時,這尤其有用。
  • 可列印性: PDF 文件是為了列印而設計的,使使用者能夠列印出高質量的內容。將 HTML 轉換為 PDF 時,完成的頁面會保留可列印的格式,從而易於列印。
  • 文件安全: PDF 檔案可以受密碼和加密保護,為關鍵資料提供額外的保護。這在交換敏感檔案或官方檔案時至關重要,因為它可以防止未經授權的訪問或更改。
  • 互動功能: PDF 與互動元件相容,包括超連結、書籤、表單欄位和多媒體檔案。將 HTML 轉換為 PDF 時可以保留這些互動元素,以便讀者瀏覽文件、填寫表單以及與嵌入媒體互動。
  • 可實現性: PDF 是一種因長期存檔可靠而聞名的格式。它使文件適合儲存重要記錄、法律檔案或歷史資料,因為它保證其內容、結構和外觀在不同時間段內得以保留。

總體而言,將 HTML 轉換為 PDF 為使用者提供了一種快速、可靠且獨立於平臺的方式來共享、分發和儲存數字內容,同時保持文件的預期結構、佈局和安全性。

HTML 到 PDF 轉換的方法

1. 使用程式語言(例如Python、PHP)進行伺服器端轉換
Python 或 PHP 等程式語言可以在伺服器上將 HTML 轉換為 PDF。許多庫可以使此轉換過程變得更容易。下面提供了使用 Python 和 PHP 進行伺服器端轉換的示例:

Python:
Pdfkit: wkhtmltopdf是pdfkit用來將HTML轉換為PDF的著名Python庫。使用 pdfkit 需要安裝 wkhtmltopdf 工具和庫。以下是如何使用 pdfkit 將 HTML 轉換為 PDF 的說明:

import pdfkit  
# Set path to wkhtmltopdf executable (required by pdfkit)  
config = pdfkit.configuration(wkhtmltopdf='/path/to/wkhtmltopdf')  
# Convert HTML to PDF  
pdfkit.from_file('input.html', 'output.pdf', configconfiguration=config)  

WeasyPrintWeasyPrint 是另一款能將 HTML 轉換為 PDF 的 Python 軟體包。它可以接受多種格式的輸入,包括 HTML 和 CSS。下面是一個 WeasyPrint 示例:

from waypoint import HTML  
# Convert HTML to PDF  
HTML('input.html').write_pdf('output.pdf')  

PHP
mPDF:使用 mPDF PHP 軟體包,您可以從 HTML 內容建立 PDF 檔案。它支援多種 HTML 和 CSS 技術,經常被使用。下面是如何使用 mPDF 將 HTML 轉換為 PDF 的示例:

<?php  
require_once __DIR__ . '/vendor/autoload.php';  
$mpdf = new \Mpdf\Mpdf();  
<font>// Read HTML content from the file  <i>
$html = file_get_contents('input.html');  
// Convert HTML to PDF  <i>
$mpdf->WriteHTML($html);  
$mpdf->Output('output.pdf', 'F');  

Dompdf:另一個將 HTML 轉換為 PDF 的 PHP 庫是 Dompdf。它便於攜帶,使用簡單。下面是如何使用 Dompdf 將 HTML 轉換為 PDF 的示例:

<?php  
require_once 'dompdf/autoload.inc.php';  
use Dompdf\Dompdf;  
$dompdf = new Dompdf();  
<font>// Read HTML content from the file  <i>
$html = file_get_contents('input.html');  
// Convert HTML to PDF  <i>
$dompdf->loadHtml($html);  
$dompdf->render();  
$dompdf->stream('output.pdf');  

這些示例展示瞭如何使用 Python 或 PHP 庫完成伺服器端 HTML 到 PDF 的轉換。執行程式碼前,請記得安裝所需的庫和依賴項。

2.使用 JavaScript 庫(如 jsPDF、html2pdf.js)進行客戶端轉換
使用 JavaScript 庫可以在客戶端將 HTML 轉換為 PDF。無需伺服器端處理,您就可以利用這些庫在使用者瀏覽器中建立 PDF 檔案。使用 JavaScript 庫提供了以下客戶端轉換示例:

jsPDF
一款名為 jsPDF 的 JavaScript 軟體包廣受歡迎,它使客戶端製作 PDF 成為可能。它提供了一種快速簡便的方法,可將 HTML 轉換為 PDF。下面是如何使用 jsPDF 將 HTML 轉換為 PDF 的示例:

<font>// Include the jsPDF library in your HTML file  <i>
// Convert HTML to PDF  <i>
function convertHtmlToPdf() {  
  var doc = new jsPDF();  
 
// Get HTML content to convert  <i>
  var html = document.getElementById('htmlContent').innerHTML;  
 
// Convert HTML to PDF  <i>
  doc.fromHTML(html, 15, 15);  
 
// Save PDF  <i>
  doc.save('output.pdf');  
}  

要將上例中的 HTML 內容轉換為 PDF,請在 HTML 檔案中包含 jsPDF 庫,然後呼叫 fromHTML() 方法。然後使用 save() 方法儲存生成的 PDF。

html2pdf.js:
另一個專注於客戶端 HTML 到 PDF 轉換的 JavaScript 程式包是 html2pdf.js。它為建立 PDF 提供了更復雜的選項和工具。下面是如何使用 html2pdf.js 將 HTML 轉換為 PDF 的示例:

<font>// Include the html2pdf.js library in your HTML file  <i>
// Convert HTML to PDF  <i>
function convertHtmlToPdf() {  
  var element = document.getElementById('htmlContent');  
 
// Convert HTML to PDF  <i>
  html2pdf()  
    .set({ filename: 'output.pdf', margin: 10 })  
    .from(element)  
    .save();  
}  

要在本例中提供要轉換的 HTML 元素,必須在呼叫 from() 方法之前在 HTML 檔案中包含 html2pdf.js 庫。set() 方法允許設定檔名和頁邊距等其他引數。最後,使用 save() 方法儲存 PDF 檔案。

jsPDF 和 html2pdf.js 都為您提供了靈活的自定義選項,讓您可以直接在使用者的瀏覽器中建立 PDF 檔案,為您的使用者提供完美的客戶端轉換體驗。

3.HTML 到 PDF 的線上轉換工具和服務
您可以使用無需安裝任何軟體或庫即可訪問的眾多工具和服務之一,線上將 HTML 檔案轉換為 PDF 檔案。

以下是幾款廣受歡迎的將 HTML 轉換為 PDF 的線上應用程式:

  • PDFShift: PDFShift 是一項信譽良好且使用者友好的線上 HTML 到 PDF 轉換服務 (https://pdfshift.io/)。它可以從 HTML、URL 和原始 HTML 程式碼建立高質量的 PDF 檔案。PDFShift 提供多種功能,包括密碼保護和定製頁首和頁尾。
  • PDFCrowd: PDFCrowd (https://pdfcrowd.com) 具有易於使用的使用者介面和複雜的 API,是可靠的線上 HTML 到 PDF 轉換服務。它可以將 URL、HTML 程式碼甚至 JavaScript 生成的動態 HTML 轉換為 PDF。使用 PDFCrowd 可以自定義頁面大小、方向、頁首、頁尾和其他功能。
  • PDFmyURL:線上程式 PDFmyURL (https://pdfmyurl.com/) 使您能夠將 HTML 網頁轉換為 PDF 檔案。輸入網頁的 URL 或上傳要轉換的 HTML 檔案。PDFmyURL 提供頁面大小、方向、邊距和其他自定義選項。
  • Sejda PDF: Sejda PDF (https://www.sejda.com/html-to-pdf) 除了線上 HTML 到 PDF 轉換服務之外,還提供各種 PDF 相關工具。它包括更改頁面大小、邊距和頁首/頁尾文字的選項,並支援將 HTML 從 URL 或 HTML 程式碼轉換為 PDF。
  • HTML 到 PDF API:這個簡單的 API 服務將 HTML 轉換為 PDF,可以在 https://html2pdf.app/ 找到。頁面大小、方向、邊距和其他設定都可以使用各種引數來指定。您可以透過傳送 API 呼叫以程式設計方式將 HTML 轉換為 PDF。

當您需要快速簡單的轉換而無需在本地安裝軟體或庫時,這些線上 HTML 到 PDF 轉換應用程式和服務非常有用。它們通常會提供額外的功能和選擇來根據您的需求定製 PDF 輸出。

在轉換期間處理 CSS 樣式和格式
為了保證最終的 PDF 與原始 HTML 文件的視覺外觀非常相似,在將 HTML 轉換為 PDF 時,處理 CSS 樣式和格式至關重要。以下是在轉換過程中處理 CSS 樣式時需要考慮的一些關鍵因素:

  • 內聯樣式:將 HTML 轉換為 PDF 時,HTML 元素中定義的內聯樣式通常保持有效。換句話說,任何使用 style 屬性直接應用於 HTML 元件的樣式都將轉移到最終的 PDF 中。確保您的 HTML 文字具有正確呈現 PDF 所需的基本內聯樣式。
  • 嵌入式 CSS:根據 HTML 到 PDF 轉換方法或所使用的庫,在 style> 標籤中定義或透過外部 CSS 檔案插入的 CSS 樣式可以在轉換過程中保留。確保可以包含並使用轉換解決方案中固有的 CSS 規則。有關處理嵌入式 CSS 的資訊,請參閱您正在使用的特定工具或庫的文件。

 

相關文章