如何使用 JavaScript 生成 PDF 文件
1.0 簡介
Adobe開發了可攜式文件格式（PDF），目的是用於分享包含文字和圖形的文件。 在線上開啟PDF文件需要額外的程式。在現代世界中，PDF文件對重要文件來說非常關鍵。 許多企業使用PDF文件來建立文件和發票。 開發者生成和製作文件的PDF以滿足客戶需求。 由於現代程式庫的關係，建立PDF的能力變得前所未有的簡單。 在為專案選擇理想的程式庫時，我們必須考慮多個因素，包括程式庫的構建、閱讀和轉換能力。
在本文中，我們將討論各種JavaScript程式庫如何建立PDF。 我們將探討JS程式庫的特點和使用案例，重點關注三大關鍵方面：
- 執行環境的相容性
- 支援自訂字體和排版模組
- 使用簡便
在本文結束時，您將能夠為您的JavaScript應用程式選擇最合適的PDF程式庫。 我們還將介紹IronPDF，一個強大且方便的PDF程式庫。
用JavaScript生成PDF文件的步驟
- 使用PDFKit程式庫的
text方法將文字插入PDF中 - 在JavaScript中利用pdfmake程式庫的
createPdf方法 - 從jsPDF程式庫實例化jsPDF類別以建立PDF
- 將配置傳遞給html2pdf程式庫的
html2pdf方法 - 利用IronPDF程式庫的
RenderHtmlAsPdf方法
2.0 程式庫
假設我們希望客戶能夠下載並列印我們的發票。 我們也希望這張發票能夠正確印刷，且格式良好。 在這裡，我們將看看一些最受歡迎的程式庫，將這張發票從HTML格式轉換為PDF。
2.1 PDFKit
在JavaScript生態系統中，PDFKit是最早引入的PDF程式庫之一。 自2012年首次發布以來，它獲得了廣泛的流行性，並在2021年截至時仍持續受到定期更新。雖然它可能比本文中提及的其他程式庫稍微複雜一些，但PDFKit提供了Node.js與瀏覽器的支援，通過Webpack實現。 此外，正如我們在比較中將看到的，某些PDF程式庫基本上是PDFKit的外包。
自訂的字體和圖像嵌入是支援的； 然而，沒有高階API。 此外，文件經常複雜。 如您所料，需要一段時間來適應，開始時您會發現建立PDF並不是最簡單的任務。
// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');
// Create a new PDF document
const doc = new PDFDocument();
// Add your content to the document here
doc.text('Hello world!');
// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));
// Finalize the PDF file
doc.end();// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');
// Create a new PDF document
const doc = new PDFDocument();
// Add your content to the document here
doc.text('Hello world!');
// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));
// Finalize the PDF file
doc.end();2.2 pdfmake
PDFKit的外包程式庫被稱為pdfmake。 兩者之間的主要區別在於編程範式：
pdfmake採用聲明式的方法，而PDFKit則遵循傳統的命令式技術。 結果是，專注於PDF生成的預期功能在使用pdfmake程式庫時更容易，而非花時間指導程式庫如何獲得特定結果。
然而，值得注意的是，並不是所有看起來有前途的事物都是完美無瑕的。 使用Webpack和嘗試將字體嵌入pdfmake時可能會導致問題。 不幸的是，關於這個問題的線上資訊有限。 如果您沒有使用Webpack，您仍然可以輕鬆複製Git儲存庫並運行字體嵌入腳本。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
<script type="text/javascript">
function downloadPdf() {
// Define the document structure
var docDefinition = {
content: [
{ text: "Hello world" }
],
defaultStyle: {}
};
// Create and print the PDF
pdfMake.createPdf(docDefinition).print();
}
</script>
<button onclick="downloadPdf()">Print pdf</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
<script type="text/javascript">
function downloadPdf() {
// Define the document structure
var docDefinition = {
content: [
{ text: "Hello world" }
],
defaultStyle: {}
};
// Create and print the PDF
pdfMake.createPdf(docDefinition).print();
}
</script>
<button onclick="downloadPdf()">Print pdf</button>
</body>
</html>上述程式碼的輸出顯示如下。
2.3 jsPDF
jsPDF是一個開源的包，僅使用純JavaScript來生成PDF文件。 它根據您提供的格式建立PDF頁面並格式化。 jsPDF是GitHub上使用最廣泛的PDF程式庫，具有高度可靠性並持續維護良好。 它提供了Node.js和瀏覽器的易於使用的模組，因為它們是根據AMD模組標準導出的。
至於PDFKit，其API遵循命令式範式，這可能使設計複雜佈局變得困難。 至於字體嵌入，唯一需要的額外步驟是將字體轉換為TTF文件，這是一個簡單的過程。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script>
function generatePDF() {
// Create a new instance of jsPDF
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a5',
putOnlyUsedFonts: true
});
// Add text to the PDF
pdf.text("Hello World", 20, 20);
// Save the PDF
pdf.save('Demopdf.pdf');
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script>
function generatePDF() {
// Create a new instance of jsPDF
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a5',
putOnlyUsedFonts: true
});
// Add text to the PDF
pdf.text("Hello World", 20, 20);
// Save the PDF
pdf.save('Demopdf.pdf');
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html>上述程式碼的輸出顯示如下。
2.4 html2pdf
為了將網頁和模板轉換為PDF文件，html2pdf將jsPDF和Html2Canvas的功能結合為一個模組。
要將您的網站轉換為PDF，請依照以下步驟：
- 使用NPM將html2pdf JavaScript程式庫本地安裝到您的伺服器上或將其包含在您的HTML程式碼中，如下例所示：
- 新增一個"生成PDF"功能，當呼叫此功能時，將指定的網頁部分轉換為PDF。 您可以使用
getElementById方法選擇所需的部分。 - 在傳遞給html2pdf之前，通過將它們新增到"opt"變數中來自訂格式選項。 這使您可以為PDF生成設定各種設定。
- 在您的HTML頁面上包含一個按鈕，點擊時觸發
generatePDF功能。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
function generatePDF() {
// Define the HTML content
const page = 'Hello World!';
// PDF options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Convert HTML to PDF
html2pdf().set(opt).from(page).save();
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
function generatePDF() {
// Define the HTML content
const page = 'Hello World!';
// PDF options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Convert HTML to PDF
html2pdf().set(opt).from(page).save();
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html>上述程式碼的輸出顯示如下。
2.5 IronPDF
IronPDF for Node.js簡化了程式化建立和自訂PDF文件的過程。 由受信任的高效能文件處理程式庫提供商Iron Software開發，IronPDF為Node.js環境中的PDF生成提供強大的解決方案。 它與Node.js專案無縫整合，為開發者提供了強大的工具，使生成、格式化和編輯PDF變得輕而易舉。
IronPDF程式庫具有廣泛的功能，包括將新或現有PDF文件中的頁面拆分和合併、閱讀和編輯現有PDF文件、從PDF文件提取圖像、向PDF文件新增文字、圖形、書籤、水印、標頭和頁腳，且無需Acrobat Reader。 可以從CSS和CSS媒體文件生成PDF文件。 IronPDF允許使用者建立、上傳和更新新的和已有的PDF表單。
IronPDF for Node.js的主要功能：
- 多功能的PDF生成：使用IronPDF，開發者可以從包括HTML、CSS、JavaScript、圖片和其他文件型別在內的多個來源生成PDF。這種靈活性使得能夠建立針對特定需求的動態且視覺美觀的PDF文件。
- 高級文件自訂：IronPDF能夠讓開發者增強PDF文件，增加標題、頁尾、附件、數位簽名、浮水印和書簽等功能。 這允許建立具有豐富內容和互動元素的專業級PDF。
- 安全功能：IronPDF提供強大的安全功能，以保護PDF免受未經授權的存取。 開發者可以執行如密碼、數位簽名、元資料和其他安全設置等安全措施來保護PDF文件中包含的敏感資訊。
- 最佳性能：IronPDF為最佳性能而設計，提供完整的多執行緒和非同步支援。 這確保了高效的PDF生成，使其適合在性能至關重要的任務中使用。
全面的功能集：擁有超過50種用於建立、格式化和編輯PDF文件的功能，IronPDF為所有與PDF相關的任務提供了一個全面的解決方案。 從基本文件生成到高級自定義和安全，IronPDF擁有滿足開發者需求的廣泛功能。
要使用自訂JavaScript生成PDF文件，請參考以下程式碼，它輕鬆地讓HTML內容變得更吸引人：
import { PdfDocument } from "@ironsoftware/ironpdf";
(async () => {
// Define the JavaScript code to change text color to red
const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";
// Create rendering options object
const renderOptions = {
enableJavaScript: true,
javascript: javascriptCode,
};
// HTML content to be rendered
const htmlContent = "<h1>Hello World!!</h1>";
// Render HTML content to a PDF
const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });
// Save the PDF with the executed JavaScript
await pdf.saveAs("result1.pdf");
})();import { PdfDocument } from "@ironsoftware/ironpdf";
(async () => {
// Define the JavaScript code to change text color to red
const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";
// Create rendering options object
const renderOptions = {
enableJavaScript: true,
javascript: javascriptCode,
};
// HTML content to be rendered
const htmlContent = "<h1>Hello World!!</h1>";
// Render HTML content to a PDF
const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });
// Save the PDF with the executed JavaScript
await pdf.saveAs("result1.pdf");
})();在上面的程式碼中，最初定義了一個JavaScript程式碼片段，用於將所有<h1>元素的顏色更改為紅色。 然後將此程式碼整合到渲染選項中，同時啟用JavaScript執行。 隨後，指定了一個包含文字"Hello World!!"的<h1>元素的HTML內容。 PDF文件是從這個HTML內容生成的，定義的渲染選項確保在渲染過程中執行JavaScript程式碼。 最後，生成的PDF文件保存為"result1.pdf"。 此程式碼展示了IronPDF的能力，即將動態JavaScript修飾整合到PDF生成中，使開發者能夠程式化地建立定製和互動的PDF文件。
3.0 總結
總之，上述的JavaScript程式碼在他人使用時，可能容易受到誤用和潛在的安全風險。 在網站上實施此類程式碼時，考慮未經授權存取的可能性和資料安全漏洞是很重要的。還需要考慮不同瀏覽器和平台的相容性問題，包括確保支援可能不具備所有必要功能的舊版瀏覽器。
相對而言，IronPDF Node.js程式庫提供了增強的安全措施，以防止潛在的威脅。 它不依賴於特定瀏覽器，並且與所有主流瀏覽器相容。 只需幾行程式碼，開發者就可以輕鬆地使用IronPDF建立和閱讀PDF文件。
該程式庫提供了各種授權選項，以滿足不同開發者的需求，包括為開發者提供的免費試用授權，以及可供購買的其他授權。 Lite包售價為$999，包括永久授權、一年的產品支援和升級選項，無需定期收費。 這些授權可用於開發、測試和生產環境。 此外，它還提供其它語言版本，如C# .NET、Java和Python。 請存取IronPDF網站以獲取更多詳細內容。
免費開始使用
免費開始使用
預約免費現場演示
不需信用卡或帳戶建立
