如何在 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函式選擇所需的部分。 - 在將其傳遞給
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，開發者可以從包括HTML、CSS、JavaScript、圖片和其他文件型別在內的多個來源生成PDF。這種靈活性使得能夠建立針對特定需求的動態且視覺美觀的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）。 - 我們使用
html-with-assets.pdf）。 - 我們使用
open函式來使用預設系統應用程式打開PDF文件。 這通常會在安裝在系統上的預設PDF檢視器中，否則會在預設瀏覽器中打開PDF。
有關PDF相關任務的更多程式碼範例，請存取此IronPDF Node.js程式碼範例頁面。
輸出將生成並顯示如上圖所示。 要了解更多關於IronPDF的資訊，請參閱IronPDF .NET PDF Viewer指南。
3.0 總結
最後，重要的是要注意，前述首頁中顯示的JavaScript程式碼可能會被錯誤使用，並可能在被他人使用時造成安全風險。 在將此類程式碼加入網頁或網站時，考慮未經授權存取和資料安全漏洞的風險至關重要。 此外，還應考慮與過時瀏覽器及不同的操作系統和瀏覽器的相容性問題。
相對而言，IronPDF Node.js程式庫提供了增強的安全措施，以防止潛在的威脅。 它不依賴於特定瀏覽器，並且與所有主流瀏覽器相容。 只需幾行程式碼，開發者就可以輕鬆地使用IronPDF建立和閱讀PDF文件。
程式庫提供了不同的授權選項以滿足不同開發者的需求，包括提供給開發者的免費試用授權以及其他可購買的授權。 Lite套裝，價格為$999，包含永久授權、一年的產品支援和升級選項，無需定期支付費用。 這些授權可用於開發、測試和生產環境。 此外，IronPDF也適用於其他語言，例如C# .NET、Java和Python。 請存取IronPDF網站以獲得更多詳細資訊。
免費開始
免費開始
預訂免費直播演示
