如何在 JavaScript 中查看 PDF 文件
Adobe 創建了可攜式文件格式 (PDF)，以實現包含豐富文本和圖形的文件共享。 要在線開啟 PDF 文件，需要不同的程式。 PDF 文件在當今環境中對於大量出版是必不可少的。 它們經常在業務中用於製作文件和發票。 開發者生成 PDF 文件以滿足客戶需求。 現代程式庫使創建 PDF 比以往更容易。 當為一個能生成自身渲染 PDF 文件的專案選擇適當的程式庫時，需要考慮各種方面，包括構建、閱讀和轉換能力。
2.0 JavaScript Libraries
考慮一下這種情況：我們希望客戶能夠下載並查看我們發票的副本。對我們同樣重要的是這張發票的準確佈局、印刷和頁數。在本節中，我們將檢查一些最受歡迎的用於檢視 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 和網頁瀏覽器，因為它們依照 AMD 模組標準進行匯出。
就 PDFKit 而言，其 API 遵循指令性模式，這使得構建複雜佈局變得困難。 使用 JavaScript 嵌入字型時，唯一需要的額外步驟是將字型轉換為 TTF 文件，這是一個簡單的過程。 在下面的代碼範例中，我們創建了一個 PDF 文件，然後在網頁瀏覽器的單獨選項卡中開啟創建的 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 for Node.js 簡化了程式化創建和自定義 PDF 文件的過程。 由高性能文件處理程式庫的可靠供應商 Iron Software 開發，IronPDF 提供了一個適用於 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 套裝售價$799，包含永久授權、一年的產品支援和升級選項，沒有經常性費用。 這些授權可以用於開發、預備和生產環境中。 此外，IronPDF 還適用於其他語言，如 C# .NET、Java 和 Python。 欲知詳情，請訪問 IronPDF 網站。
免費開始
免費開始
預訂免費直播演示
無需信用卡或建立帳號
