信息圖標
跳過到頁腳內容
  1. IronPDF
  2. IronPDF博客
  3. Node PDF 工具
  4. JavaScript PDF 查看器
PDF工具

如何在 JavaScript 中查看 PDF 文件

Darrius Serrant
Darrius Serrant
更新日期:

Adobe 創建了可移植文件格式 (PDF)，以便分享包含大量文本和圖形的文件。 要在線開啟 PDF 文件，需要一個不同的程式。 在當今的環境中，PDF 文件是大量出版不可或缺的。 在商業中，它們經常被用來製作文件和發票。 開發人員生成 PDF 文件以滿足客戶需求。 現代庫使創建 PDF 比以往任何時候都更加容易。 當選擇生成其自身渲染 PDF 文件的項目的合適庫時，需要考慮各種方面，包括製作、閱讀和轉換能力。

2.0 JavaScript 庫

考慮一下，例如，我們希望客戶能夠下載並查看我們的賬單副本。我們同樣重視的是賬單的準確佈局、打印和頁數。在本節中，我們將研究一些最受歡迎的 PDF 文件查看庫。

2.1 HTML2PDF

HTML2PDF 將 jsPDF 和 Html2Canvas 的功能組合成一個模組，以將網頁和模板轉換為完整的 PDF 文件。

請按照以下步驟從網站創建 PDF：

  1. 使用 NPM 本地安裝 html2pdf JavaScript 庫到您的服務器，或將其添加到您的 HTML 代碼中，如下圖所示。
  2. 創建一個名為 viewPDF 的函數，該函數將用於將目標網頁部分轉換為 PDF。 使用 getElementById 函數選擇所需的部分。
  3. 在傳遞給 html2pdf 之前，通過將格式選項添加到 opt 變量來修改格式選項。 這允許您自訂 PDF 生成的各種設置。
  4. 在您的 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">
        <!-- Content to convert to PDF -->
        <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">
        <!-- Content to convert to PDF -->
        <h1>Hello World!</h1>
    </div>
    <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() {
      // 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>
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);
  }
})();
JAVASCRIPT

在此代碼中：

  • 我們從 HTML 內容生成 PDF 檔 (pdf)。
  • 我們使用 saveAs 將 PDF 檔保存到一個臨時文件 (html-with-assets.pdf)。
  • 我們使用 open 包中的 open 函數，使用系統默認應用程式打開 PDF 文件。 這通常會在系統上安裝的默認 PDF 查看器中或默認瀏覽器中打開 PDF。

有關與 PDF 相關任務的更多代碼示例，請訪問這個 IronPDF Node.js 代碼樣例 頁面。

如何在 JavaScript 中查看 PDF 文件：圖 2

輸出將生成並顯示如上圖所示。 要了解更多有關 IronPDF 的資訊，請參閱 IronPDF .NET PDF 查看器指南。

3.0 結論

最後，必須注意，顯示在上面第一頁的 JavaScript 代碼有被濫用的潛力，當被他人使用時可能會帶來安全風險。 在將此類代碼合併到網頁或網站中時，考慮未經授權的訪問和數據安全漏洞風險至關重要。 此外，應考慮與過時瀏覽器和不同操作系統及瀏覽器的兼容性問題。

相反，IronPDF Node.js 庫提供了增強的安全措施，以保護免受潛在威脅。 它不依賴於特定的瀏覽器，並且兼容所有主要的瀏覽器。 開發人員只需幾行代碼即可輕鬆創建和讀取 PDF 文件，使用 IronPDF。

The library provides various licensing options to cater to different developer needs, including a free trial license for developers and additional licenses for purchase. Lite 套件售價為 $799，包括一個永久許可證、一年的產品支持和升級選項，無需支付經常性費用。 這些授權可以在開發、測試和生產環境中使用。 Additionally, IronPDF is also available for other languages like C# .NET, Java, and Python. 訪問 IronPDF 網站了解更多詳情。

Darrius Serrant
Darrius Serrant
  立即與工程團隊聊天
全棧軟件工程師 (WebOps)

Darrius Serrant 擁有邁阿密大學計算機科學學士學位，目前任職於 Iron Software 的全栈 WebOps 市場營銷工程師。從小就迷上編碼，他認為計算既神秘又可接近，是創意和解決問題的完美媒介。

在 Iron Software，Darrius 喜歡創造新事物，並簡化複雜概念以便於理解。作為我們的駐場開發者之一，他也自願教學生，分享他的專業知識給下一代。

對 Darrius 來說，工作令人滿意因為它被重視且有實際影響。

相關文章

30 天試用→完整產品。無限制。無需信用卡。 開始免費試用