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：

在您的伺服器上本地安裝 html2pdf JavaScript 庫，可以使用 NPM，或按照下面的範例將其添加到您的 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

如何在 JavaScript 中查看 PDF 檔案：圖 1

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() {
                 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);
})();

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 Node.js 代碼範例頁面。
輸出將會像上圖那樣生成並顯示。如需了解更多關於 IronPDF 的資訊，請查看IronPDF .NET PDF 檢視器指南.

3.0 結論

最後，重要的是要注意，上面第一頁顯示的 JavaScript 代碼可能會被濫用，並在其他人使用時可能帶來安全風險。在將此類程式碼整合到網頁或網站時，必須考慮未經授權的存取和資料安全漏洞的風險。此外，還應考慮到與過時瀏覽器和不同操作系統及瀏覽器的兼容性問題。

相比之下，IronPDF Node.js 資料庫提供增強的安全措施，以防範潛在的威脅。它不依賴特定瀏覽器，且與所有主流瀏覽器兼容。只需幾行代碼，開發人員即可使用 IronPDF 輕鬆創建和讀取 PDF 文件。

該庫提供多種授權選項，以滿足不同開發者的需求，包括一個免費試用開發者授權和額外的購買許可證. Lite 套餐，價格為 $749，包括永久許可證、一年的產品支持和升級選項，無需支付重複費用。這些授權可用於開發、測試和生產環境。此外，IronPDF 也適用於其他語言，如C# .NET, Java，和Python. 訪問IronPDF 網站了解更多詳情。

< 上一頁
如何在JavaScript中创建PDF文件

下一個 >
如何使用 JavaScript 生成 PDF 文件