如何在 JavaScript 中查看 PDF 文件
Adobe 建立了可攜式文件格式 (PDF)，以便共用包含大量文字和圖形的文件。 若要在線上開啟PDF文件，需要使用其他程式。 在當今的出版環境中，PDF 文件對於大量出版物來說是必不可少的。 它們經常用於商業活動中，用於產生文件和發票。 開發人員產生PDF文件以滿足客戶需求。 現代圖書館讓創建 PDF 文件變得比以往任何時候都更加容易。 在為能夠產生自身渲染 PDF 檔案的專案選擇合適的程式庫時，需要考慮各種方面，包括建置、讀取和轉換功能。
2.0 JavaScript庫
例如，假設我們希望客戶能夠下載並查看我們的發票副本。同樣重要的是，發票的版面、列印效果和頁數也要準確無誤。在本節中，我們將介紹一些最常用的 PDF 文件檢視庫。
2.1 HTML2PDF
HTML2PDF將 jsPDF 和 Html2Canvas 的功能結合到一個模組中，用於將網頁和範本轉換為完整的 PDF 文件。
請按照以下步驟從您的網站建立 PDF 檔案：
- 使用 NPM 在本機伺服器上安裝 html2pdf JavaScript庫，或像下面的範例所示將其新增至 HTML 程式碼。
- 建立一個名為
viewPDF的函數，用於將目標網頁部分轉換為 PDF。 使用getElementById功能選擇所需的段落。 - 在將其傳遞給
html2pdf之前，透過將其新增至opt變數來修改格式化選項。 這樣您就可以自訂 PDF 產生的各種設定。 - 在你的 HTML 頁面上新增一個按鈕，點擊該按鈕會觸發
viewPDF函數。 此功能將產生 PDF 文件並在單獨的瀏覽器標籤頁中開啟它。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
function viewPDF() {
// Select the element to convert to PDF
const element = document.getElementById('content-to-print');
// Define PDF formatting options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Create and open the PDF
let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
.then((data) => {
let fileURL = URL.createObjectURL(data);
window.open(fileURL);
});
}
</script>
</head>
<body>
<div id="content-to-print">
<h1>Hello World!</h1>
</div>
<button onclick="viewPDF()">View 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 viewPDF() {
// Select the element to convert to PDF
const element = document.getElementById('content-to-print');
// Define PDF formatting options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Create and open the PDF
let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
.then((data) => {
let fileURL = URL.createObjectURL(data);
window.open(fileURL);
});
}
</script>
</head>
<body>
<div id="content-to-print">
<h1>Hello World!</h1>
</div>
<button onclick="viewPDF()">View PDF</button>
</body>
</html>
2.3 jsPDF
名為jsPDF的開源軟體完全使用JavaScript建立PDF檔案。 它會產生一個 PDF 頁面對象，並根據提供的格式對其進行格式化。 GitHub上最常使用且維護最好的 PDF 函式庫也叫 jsPDF。 它為Node.js和 Web 瀏覽器提供易於使用的模組，因為它們是按照 AMD 模組標準導出的。
就 PDFKit 而言，其 API 遵循命令式模型，這使得建立複雜的佈局變得困難。 使用JavaScript嵌入字體唯一需要的額外步驟是將字體轉換為 TTF 文件，這是一個簡單的過程。 在下面的程式碼範例中，我們建立一個 PDF 文件，然後在 Web 瀏覽器的單獨標籤頁中開啟已建立的 PDF 文件。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script>
function viewPDF() {
// 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);
// Open the generated PDF in a new browser tab
window.open(pdf.output('bloburl'));
}
</script>
</head>
<body>
<button onclick="viewPDF()">View 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 viewPDF() {
// 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);
// Open the generated PDF in a new browser tab
window.open(pdf.output('bloburl'));
}
</script>
</head>
<body>
<button onclick="viewPDF()">View Pdf</button>
</body>
</html>2.3 IronPDF
IronPDF 適用於 Node.js簡化了以程式設計方式建立和自訂 PDF 文件的過程。 IronPDF由高效能文件處理庫的可靠提供者Iron Software開發，為在Node.js環境中產生 PDF 提供了一個強大的解決方案。 它與Node.js專案無縫集成，為開發人員提供強大的工具，可以輕鬆產生、格式化和編輯 PDF。
IronPDF for Node.js的主要特性：
- 多功能 PDF 生成：借助IronPDF，開發人員可以從各種來源生成 PDF，包括 HTML、CSS、 JavaScript、圖像和其他文件類型。這種靈活性使得創建動態且美觀的 PDF 文件成為可能，並可根據特定需求進行客製化。
- 進階文件自訂： IronPDF可讓開發人員透過頁首、頁尾、附件、數位簽章、浮水印和書籤等功能來增強 PDF 文件。 這樣就可以建立具有豐富內容和互動式元素的專業級 PDF 檔案。
- 安全功能： IronPDF提供強大的安全功能，以保護 PDF 檔案免受未經授權的存取。 開發人員可以實施密碼、數位簽章、元資料和其他安全性設定等安全措施，以保護 PDF 文件中包含的敏感資訊。
- 最佳化效能： IronPDF旨在實現最佳效能，具有完整的多執行緒和非同步支援。 這確保了高效的 PDF 生成，使其適用於對效能要求極高的關鍵任務應用。
- 全面的功能集： IronPDF提供超過 50 種用於建立、格式化和編輯 PDF 文件的功能，為所有與 PDF 相關的任務提供全面的解決方案。 從基本文件產生到進階自訂和安全， IronPDF提供廣泛的功能來滿足開發人員的需求。
以下程式碼範例使用JavaScript建立 PDF 文檔，然後直接從應用程式中檢視：
import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";
(async () => {
try {
// Create a PDF from an HTML string
const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");
// Save the PDF to a temporary file
const filePath = "html-with-assets.pdf";
await pdf.saveAs(filePath);
// Open the PDF file using the default system application
open(filePath);
} catch (error) {
console.error("Error creating or opening PDF:", error);
}
})();import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";
(async () => {
try {
// Create a PDF from an HTML string
const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");
// Save the PDF to a temporary file
const filePath = "html-with-assets.pdf";
await pdf.saveAs(filePath);
// Open the PDF file using the default system application
open(filePath);
} catch (error) {
console.error("Error creating or opening PDF:", error);
}
})();這段程式碼中：
- 我們從 HTML 內容產生 PDF 文件 (
pdf)。 - 我們使用
saveAs將 PDF 文件儲存到臨時檔案 (html-with-assets.pdf)。 - 我們使用
open套件中的open函數，透過預設系統應用程式開啟 PDF 檔案。 這通常會在系統上安裝的預設 PDF 檢視器中開啟 PDF 文件，否則會在預設瀏覽器中開啟。
有關 PDF 相關任務的更多程式碼範例，請造訪IronPDF Node.js程式碼範例頁面。
輸出結果將會產生並顯示為如上圖所示。 要了解有關IronPDF 的更多信息，請參閱IronPDF .NET PDF 檢視器指南。
3.0 結論
最後要注意的是，上面第一頁顯示的JavaScript程式碼有可能被濫用，並且在被其他人使用時可能會造成安全風險。 將此類程式碼新增至網頁或網站時，請務必考慮未經授權的存取風險和資料安全漏洞。 此外，還應考慮與過時的瀏覽器以及不同作業系統和瀏覽器的兼容性問題。
相比之下， IronPDF Node.js庫提供了增強的安全措施來抵禦潛在威脅。 它不依賴特定瀏覽器，並且與所有主流瀏覽器相容。 只需幾行程式碼，開發人員即可使用IronPDF輕鬆建立和讀取 PDF 文件。
該庫提供各種授權選項以滿足不同開發者的需求，包括開發者的免費試用許可證和可供購買的額外許可證。 Lite套餐售價為 $999，包含永久授權、一年產品支援和升級選項，且無任何續約。 這些許可證可用於開發、測試和生產環境。 此外， IronPDF也支援其他語言，如C# .NET 、 Java和Python 。 請造訪IronPDF網站以了解更多詳情。
免費開始使用
免費開始使用
預約免費現場演示
無需信用卡或創建帳戶
