在實際環境中測試
在生產環境中測試無浮水印。
在任何需要的地方都能運作。
全功能產品
獲得30天完全功能的產品。
幾分鐘內即可啟動並運行。
24/5技術支援
試用產品期間完全訪問我們的支援工程團隊
PDF 工具
如何在 JavaScript 中查看 PDF 文件
發佈 2023年6月13日
介紹
Adobe 創建了可攜式文檔格式 (PDF) 啟用包含豐富文本和圖形的文檔共享。要在線打開 PDF 文件，需要一個不同的程序。PDF 文件在當今環境中對於大規模出版是不可或缺的。它們經常在商業中用來生成文檔和發票。開發者生成 PDF 文件來滿足客戶需求。現代圖書館使創建 PDF 比以往任何時候都更容易。在為生成自己渲染的 PDF 文件的項目選擇合適的庫時，需要考慮各種方面，包括構建、閱讀和轉換能力。
2.0 JavaScript 库
考慮例如，我們希望客戶能夠下載並查看我們發票的副本。我們同樣重視的是這份發票的準確佈局、打印方式和頁面數量。在本節中，我們將探討一些最受歡迎的 PDF 文件查看庫。
2.1 HTML2PDF
HTML2PDF 結合了 jsPDF 和 Html2Canvas 的功能到一個模組中，將網頁和模板轉換成完整的 PDF 文檔。
按照以下步驟從您的網站創建一個 PDF：
使用 NPM 在您的伺服器本地安裝 html2pdf JavaScript 庫，或者將其添加到您的 HTML 代碼中，如下面的示例所示。
創建一個名為
generatePDF的函數，用於將目標網頁部分轉換為 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() {
const element = '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(element).save();
let worker = html2pdf().set(opt).from(element).toPdf().output('blob').then((data) => {
//console.log(data)
let fileURL = URL.createObjectURL(data);
window.open(fileURL);
})
}
</script>
</head>
<body>
<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() {
const element = '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(element).save();
let worker = html2pdf().set(opt).from(element).toPdf().output('blob').then((data) => {
//console.log(data)
let fileURL = URL.createObjectURL(data);
window.open(fileURL);
})
}
</script>
</head>
<body>
<button onclick="viewpdf()">View PDF</button>
</body>
</html>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() {
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a5',
putOnlyUsedFonts:true
});
pdf.text("Hello World", 20, 20);
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() {
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a5',
putOnlyUsedFonts:true
});
pdf.text("Hello World", 20, 20);
window.open(pdf.output('bloburl'))
}
</script>
</head>
<body>
<button onclick="viewPDF()">View Pdf</button>
</body>
</html>HTML
2.3 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，開發人員可以從各種來源生成 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 () => {
// 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 advancedPdf.saveAs(filePath);
// Open the PDF file using the default system application
open(filePath);
})();JAVASCRIPT
在此代碼中：
- 我們生成 PDF 文件 (advancedPdf) 從帶有資產的 HTML 內容。
- 我們將 PDF 文件保存到臨時文件 (html-with-assets.pdf) 使用 saveAs。
- 我們使用 open 套件中的 open 函數來使用系統預設應用程式打開 PDF 文件。這通常會在系統中已安裝的預設 PDF 查看器中打開 PDF 文件，否則將在預設瀏覽器中打開。
有關 PDF 相關任務的更多代碼範例，請訪問這個 程式碼範例 頁面。
輸出將按照上述圖片生成和顯示。欲了解更多關於IronPDF的資訊，請參閱 這裡.
3.0 結論
最後，需要注意的是，上面第一頁顯示的JavaScript代碼可能會被濫用，並且在其他人使用時可能會帶來安全風險。將此類代碼納入網頁或網站時，需要考慮未經授權訪問和數據安全漏洞的風險。此外，還應考慮與過時瀏覽器以及不同操作系統和瀏覽器的兼容性問題。
相反，IronPDF Node.js庫提供了增強的安全措施，以防止潛在威脅。它不依賴於特定的瀏覽器，並且與所有主流瀏覽器兼容。開發人員只需幾行代碼，就可以輕鬆地使用IronPDF創建和閱讀PDF文件。
該庫提供了各種授權選項，以滿足不同開發人員的需求，包括一個 免費試用 開發者授權和額外的 授權 可供購買。Lite 套裝，價格為 $749，包含永久許可證、一年的產品支援和升級選項，無需支付經常性費用。這些許可證可用於開發、測試和生產環境。此外，也可用於其他語言如 C# .NET, Java 和 Python。造訪 IronPDF 網站以獲取更多詳細資訊。
