如何利用js或php將html網頁轉為pdf

作者：Eve Cole 更新時間：2024-12-13 08:48:02

Downcodes小編為您帶來一篇關於如何使用JavaScript和PHP將HTML網頁轉換為PDF檔案的教學。本文將詳細介紹兩種方法：使用JavaScript庫jsPDF和使用PHP庫TCPDF或mPDF。 jsPDF庫允許在客戶端直接進行轉換，而PHP庫則需要在伺服器端進行處理。我們將重點介紹jsPDF的使用方法，並提供程式碼範例，涵蓋了引入庫、處理HTML內容、創建PDF實例、調整格式、保存文件等步驟，同時也會簡要介紹使用PHP進行轉換的方法以及高級功能的實現，例如添加圖片、浮水印、頁眉頁腳等。無論您選擇哪種方法，本文都將幫助您有效率地完成HTML到PDF的轉換。

網頁轉PDF是一種常見的需求，它讓我們可以將網站內容以固定格式保存下來。使用JavaScript或PHP將HTML網頁轉為PDF包括：使用JavaScript庫、使用PHP庫。在這些轉換工具中，JavaScript庫如jsPDF和html2pdf.js非常受歡迎，而PHP則有像TCPDF或mPDF這樣的函式庫。我們將重點介紹使用JavaScript的jsPDF庫來實現轉換，這是因為jsPDF庫提供了很好的客戶端支持，操作簡單，而且可以在不與伺服器通訊的情況下完成轉換。

jsPDF是一個使用純JavaScript編寫的函式庫，它可以在前端環境中運作，不需要後端支援。要使用jsPDF，首先需要在專案中引入它的庫檔。你可以從jsPDF的GitHub儲存庫或透過npm來安裝它。一旦引入了jsPDF庫，就可以使用JavaScript程式碼來讀取HTML的內容，並使用jsPDF提供的API來產生PDF檔案。

一、引進JSPDF庫

要開始轉換流程，你首先需要將jsPDF引入到你的網頁中。你可以直接下載jsPDF庫並透過

或使用npm進行安裝：

npm install jspdf

然後在你的JavaScript檔案中引入：

import { jsPDF } from jspdf;

二、選擇並修改HTML內容

在產生PDF之前，你可能會想要修改HTML以確保轉換出的PDF檔案符合你的需求。例如，你可能需要隱藏某些頁面元素，只保留主要內容。

// 取得需要轉換的HTML元素

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

// 修改HTML內容，例如隱藏不需要的元素

element.querySelectorAll('.no-print').forEach(element => element.style.display = 'none');

三、建立JSPDF實例並轉換HTML

建立一個新的jsPDF實例，並使用jsPDF提供的API來讀取HTML元素，並將其轉換為PDF格式。

const doc = new jsPDF();

// 假設你希望頁面呈現在一個A4大小的PDF中

doc.html(document.body, {

callback: function (doc) {

doc.save('webpage.pdf');

x: 10,

y: 10,

width: 190,

windowWidth: document.body.scrollWidth

});

四、調整PDF的格式與佈局

轉換過程中你可能需要調整PDF的格式和佈局，例如頁面尺寸、邊距、或是否需要橫向列印等。

const doc = new jsPDF({

orientation: 'p', // 縱向

unit: 'mm', // 單位使用毫米

format: 'a4', // 格式為A4紙

});

五、儲存PDF文件

一旦HTML內容被轉換成PDF，你可以使用save()方法來儲存文件，或透過其他方式來處理產生的PDF資料。

doc.save('converted-webpage.pdf'); // 儲存PDF文件

六、使用PHP進行HTML到PDF的轉換

如果你希望在伺服器端進行HTML到PDF的轉換，可以使用PHP的函式庫，例如TCPDF或mPDF。要使用這些函式庫，你需要先在你的PHP環境中引入它們，通常可以透過Composer來進行安裝。

composer require tecnickcom/tcpdf

然後在PHP腳本中建立一個TCPDF對象，並使用該對象提供的方法把HTML代碼轉換為PDF格式。

require_once('tcpdf_include.php');

// 建立新的PDF文檔

$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);

// 設定文檔資訊

$pdf->SetCreator(PDF_CREATOR);

$pdf->SetAuthor('Your Name');

$pdf->SetTitle('TCPDF Example 001');

$pdf->SetSubject('TCPDF Tutorial');

$pdf->SetKeywords('TCPDF, PDF, example, test, guide');

// 新增一個頁面

$pdf->AddPage();

// 設定內容

$html = '

Welcome to TCPDF!

$pdf->writeHTML($html, true, false, true, false, '');

// 輸出PDF

$pdf->Output('example_001.pdf', 'I');

七、樣式和字體管理

處理PDF轉換時，你可能需要考慮文件中的樣式和字體，確保產生的PDF文件保留了網頁內容的風格。

jsPDF和TCPDF都提供了對樣式的基本支持，你可以在HTML 中直接使用CSS樣式，或是在產生PDF時套用樣式。然而，由於PDF的渲染方式與網頁不完全相同，可能會有一些差異。對於jsPDF，可以透過外掛程式來增強對CSS的支援。而對於TCPDF，你需要仔細調整CSS才能得到最佳效果。

doc.setFont(helvetica);

doc.setFontStyle(bold);

doc.setFontSize(16);

doc.text(Hello World!, 10, 10);

$html = '

This is a blue title.

$pdf->writeHTML($html, true, false, true, false, '');

八、進階功能和自訂

在PDF轉換的過程中，你可能還需要處理一些進階功能，例如新增頁首頁尾、浮水印、表格、圖片等內容。這些功能在jsPDF和TCPDF庫中通常都有支持，但它們的實作方式略有不同。根據具體的需求，可以呼叫對應的函式庫函數來實現。

jsPDF提供了各種方法來增強PDF的功能，如addImage()用於新增影像，setProperties()用於設定文件屬性等。

// 新增圖片

doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);

TCPDF同樣提供了強大的功能來處理PDF的高級內容。

// 設定頁眉

$pdf->setHeaderData('', 0, 'Title', 'Header', array(0,64,255), array(0,64,128));

$pdf->setHeaderFont(Array('helvetica', '', 10));

// 新增浮水印

$pdf->SetAlpha(0.3);

$pdf->Image('watermark.png', 25, 110, 160, 40, '', '', '', false, 300, '', false, false, 0);

// 復原全透明度

$pdf->SetAlpha(1);

總結起來，利用JavaScript或PHP將HTML網頁轉為PDF文件涉及到選擇合適的庫、處理網頁內容、調整PDF版式、以及運用庫提供的高級功能以實現複雜的定制需求。無論選擇客戶端的jsPDF還是伺服器端的TCPDF，基本的實作步驟和方法都是類似的。在具體實現時，需要根據專案的實際需求和環境來選擇最合適的工具和方法。