跳過到頁腳內容
  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 和 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() {
      // 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 文件的過程。 IronPDF 由高效能文件處理庫的可靠提供者 Iron Software 開發，為在 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 庫提供了增強的安全措施來抵禦潛在威脅。 它不依賴特定瀏覽器，並且與所有主流瀏覽器相容。 只需幾行程式碼，開發人員即可使用 IronPDF 輕鬆建立和讀取 PDF 文件。

該庫提供各種授權選項以滿足不同開發者的需求，包括開發者的免費試用許可證和可供購買的額外許可證。 Lite 套餐售價為$799 ，包含永久授權、一年的產品支援和升級選項，且無任何續費。 這些許可證可用於開發、測試和生產環境。 此外，IronPDF 還支援其他語言，如C# .NET 、 Java和Python 。 請造訪IronPDF 網站以了解更多詳情。

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

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

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

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

相關文章

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