在實際環境中測試
在生產環境中測試無浮水印。
在任何需要的地方都能運作。
全功能產品
獲得30天完全功能的產品。
幾分鐘內即可啟動並運行。
24/5技術支援
試用產品期間完全訪問我們的支援工程團隊
PDF 工具
如何使用 JavaScript 生成 PDF 文件
發佈 2023年5月23日
1.0 簡介
Adobe 開發了可攜式文檔格式 (PDF) 為了共享具有文字和圖形的文件。在線打開 PDF 文件需要額外的程式。在現代世界中，PDF 文件對於重要文件來說相當重要。許多企業使用 PDF 文件來創建文檔和發票。開發人員生成和生成文檔的 PDF 以滿足客戶需求。由於現代程式庫的出現，創建 PDF 的功能變得前所未有的簡單。選擇專案的理想程式庫時，我們必須考慮許多因素，包括程式庫的構建、閱讀和轉換能力。
在本文中，我們將討論各種用於 PDF 創建的 JavaScript 程式庫。我們將探討 JS 程式庫的功能和使用案例，重點關注三個主要方面：
- 執行環境相容性
- 支持自定義字體和排版模塊
- 易用性
在本文結束時，您將能夠選擇最適合您的 JavaScript 應用程序的 PDF 程式庫。我們還將介紹 IronPDF，一個強大且方便的 PDF 程式庫。
使用 Javascript 生成 PDF 文件的步驟
2.0 資料庫
假設我們希望客戶能夠下載並列印我們的發票。我們還希望這張發票能夠以良好的格式正確列印。在這裡，我們將看看一些最受歡迎的將這張發票從 HTML 格式轉換為 PDF 的資料庫。
2.1 PDFKit
在廣泛的 JavaScript 生態系統中，PDFKit 是最早引入的 PDF 庫之一。自 2012 年首次發布以來，它已獲得了相當大的受歡迎程度，截至 2021 年仍在定期更新。PDFKit 提供對 Node.js 和網頁瀏覽器的支持，透過 Webpack 雖然它相比其他庫來說可能稍微複雜一些。此外，正如我們在比較中所見，某些 PDF 庫實際上是 PDFKit 的包裝器。
支持自定義字體和圖像嵌入，不過沒有高級 API。另外，文件經常複雜。正如你所預料的那樣，它需要一段時間來適應，並且一開始你會發現創建 PDF 並不是最簡單的任務。
const PDFDocument = require('pdfkit');
const fs = require('fs');
// create a document the same way as above
const doc = new PDFDocument;
// add your content to the document here, as usual
doc.text('Hello world!');
// get a blob when you're done
doc.pipe(fs.createWriteStream('Demo.pdf'));
doc.end();JAVASCRIPT
2.2 pdfmake
pdfmake 是 PDFKit 的一個封裝庫。兩者之間的主要區別在於它們的編程範式：
pdfmake 採用聲明式的方法，而 PDFKit 則遵循傳統的命令式技術。因此，與其花時間指導庫如何實現特定結果，不如說在使用 pdfmake 庫時更容易專注於 PDF 生成所需的功能。
然而，值得注意的是，不是所有看起來有前途的東西都是完美無缺的。使用 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() {
var docDefinition = {
content: [
{text:"Hello world"}
],
defaultStyle: {
}
};
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() {
var docDefinition = {
content: [
{text:"Hello world"}
],
defaultStyle: {
}
};
pdfMake.createPdf(docDefinition).print();
}
</script>
<button onclick="downloadPdf()">Print pdf</button>
</body>
</html>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() {
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a5',
putOnlyUsedFonts:true
});
pdf.text("Hello World", 20, 20);
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() {
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a5',
putOnlyUsedFonts:true
});
pdf.text("Hello World", 20, 20);
pdf.save('Demopdf.pdf');
}
</script>
</head>
<body>
<button onclick="generatePDF()">print Pdf</button>
</body>
</html>HTML
上面代碼的輸出如下所示。
2.4 html2pdf
要將網頁和模板轉換為 PDF 文件，html2pdf 將 jsPDF 和 Html2Canvas 的功能組合成一個模組。
要將您的網站轉換為 PDF，請按照以下步驟操作：
使用 NPM 在您的服務器上本地安裝 html2pdf JavaScript 庫，或將其包含在您的 HTML 代碼中，如下面的例子所示：
添加一個“生成 PDF”函數，該函數將被調用以將指定的網頁段落轉換為 PDF。您可以使用
getElementById方法選擇所需的段落。通過將格式選項添加到 "opt" 變量中來自定義格式選項，然後將其傳遞給 html2pdf。這允許您定義 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() {
const page = 'Hello World!';
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Choose the element that our invoice is rendered in.
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() {
const page = 'Hello World!';
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Choose the element that our invoice is rendered in.
html2pdf().set(opt).from(page).save();
}
</script>
</head>
<body>
<button onclick="generatePDF()">print Pdf</button>
</body>
</html>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請看看下面的程式碼，它可以輕鬆地使 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");
})();JAVASCRIPT
在上述程式碼中，首先定義了一段將所有 <h1> 元素變成紅色的 JavaScript 程式碼片段。然後，這段程式碼被集成到渲染選項中並啟用了 JavaScript 執行。隨後，包含 <h1> 元素和文本 "Hello World" 的 HTML 內容被處理。!!is specified. The PDF document is generated from this HTML content with the defined rendering options, ensuring that the JavaScript code is executed during the rendering process. Finally, the resulting PDF document is saved as "result1.pdf". This code showcases IronPDF's capability to incorporate dynamic JavaScript modifications into PDF generation, enabling developers to create customized and interactive PDF documents programmatically.
被指定。這個 PDF 文件是根據這個 HTML 內容所生成的，並且設置了渲染選項，確保在渲染過程中執行 JavaScript 代碼。最後，生成的 PDF 文件保存為 "result1.pdf"。這段代碼展示了 IronPDF 在 PDF 生成過程中結合動態 JavaScript 修改的能力，使開發者能夠以編程方式創建定制化和交互式的 PDF 文件。
3.0 總結
總而言之，上述的 JavaScript 代碼在被其他人使用時可能會受到誤用和潛在的安全風險的影響。在網站上實施這樣的代碼時，需要考慮未經授權的訪問和數據安全漏洞的可能性。也應考慮不同瀏覽器和平台之間的兼容性問題，包括確保對較舊瀏覽器的支持，這些瀏覽器可能不具備所有所需的功能。
相較之下，IronPDF for Node.js 庫提供了增強的安全措施，以防範潛在的威脅。它不依賴於特定的瀏覽器，並且兼容所有主要瀏覽器。開發人員只需幾行代碼即可輕鬆創建和讀取 PDF 文件。
該庫提供各種許可選項，以滿足不同開發人員的需求，包括一個 免費試用 開發者授權和額外的 授權 可供購買。Lite 套裝，價格為 $749，包含永久許可證、一年的產品支援和升級選項，無需支付經常性費用。這些許可證可用於開發、測試和生產環境。此外，也可用於其他語言如 C# .NET, Java 和 Python。造訪 IronPDF 網站以獲取更多詳細資訊。
