PDF 工具

如何在 React 中將 HTML 轉換為 PDF（開發者教程）

發佈 2023年5月16日

在 React 中將 HTML 轉換為 PDF 已成為許多網頁應用程式的重要功能。無論您是在構建一個發票系統、報告生成器，還是只需要以普遍接受的格式共享信息，生成 PDF 都非常關鍵。在本文中，我們將探討如何使用流行的庫在您的 React 應用程式中通過將 HTML 轉換為 PDF 來創建和樣式化 PDF 檔案。

如何在 React 中將 HTML 轉換為 PDF

建立和配置一個 React 專案
使用 npm 下載將 HTML 轉換為 PDF 的 React 程式庫
從 React-pdf/renderer 導入必要的模塊
配置具有匯入模組的HTML頁面
使用 PDF下載連結 React-pdf 模組將 HTML 轉換為 PDF

用於 PDF 生成的熱門庫

在深入了解 HTML 轉 PDF 的過程之前，讓我們討論一些您可以在 React 應用中使用的熱門 PDF 生成 庫：

React-pdf：適用於 React 應用的強大庫，用於創建 PDF 文檔。它支持各種樣式選項，並且可以輕鬆創建複雜的多頁 PDF。
jsPDF：一個廣泛使用的 JavaScript 庫，用於即時生成 PDF 文件。它提供豐富的功能，包括文本樣式、圖像嵌入等。
html2canvas：該庫允許您捕捉 HTML 元素的屏幕截圖並將其轉換為畫布對象，然後可以使用其他庫（如 jsPDF）將其轉換為 PDF。

在 React 中將 HTML 轉換為 PDF 的先決條件

熟悉 React 及其生態系統

在深入了解 HTML 到 PDF 轉換之前，牢固掌握 React 是至關重要的。這包括對 JSX、狀態管理、組件生命週期和 hooks 的了解。

了解 HTML、CSS 和 JavaScript

對 React-pdf 函式庫的操作來說，扎實的 HTML、CSS 和 JavaScript 基礎是必不可少的。這包括 HTML 元素和屬性、CSS 樣式和選擇器、以及 JavaScript 基礎知識，例如變量、函數和循環等內容。

開始使用React應用程式

在我們繼續進行將 HTML 轉換為 PDF 在 React 中之前，讓我們快速介紹如何使用流行的 create-react-app CLI 工具創建一個新的 React 應用程式。這將作為我們 PDF 生成範例的基礎。

步驟 1 安裝 Node.js

確保您的機器上已安裝 Node.js。您可以從以下網址下載最新版本的 Node.js 官方網站.

第2步安裝 create-react-app

create-react-app 是一個廣泛使用的CLI工具，用於生成React應用程序。使用以下命令在全域範圍內安裝它：

npm install -g create-react-app

如何在 React 中將 HTML 轉換為 PDF（開發者教程）：圖 1 - 創建 React 應用程序

第三步建立新的 React 應用程式

現在已安裝 create-react-app，您可以使用以下命令創建一個新的 React 應用程式:

create-react-app my-pdf-app

如何在 React 中將 HTML 轉換為 PDF（開發者教程）：圖 2 - 建立新的 React 應用程式

此命令將在一個名為my-pdf-app的文件夾中生成一個新的 React 應用程式。移動到新創建的目錄中：

cd my-pdf-app

步驟 4 啟動開發伺服器

要啟動開發伺服器並查看新的 React 應用程式運行效果，請執行以下命令：

npm start

如何在 React 中將 HTML 轉換為 PDF（開發人員教程）：圖 3 - 本地運行的實時 React 應用程序

第五步實現 PDF 生成

現在您已經設置了一個 React 應用程式，您可以按照本文前幾部分所述的步驟，使用像 React-pdf 這樣的流行庫來實現 HTML 到 PDF React 轉換。

介紹 React-pdf 庫

React-pdf 是一個專為 React 應用程式設計的流行庫，提供與 React 生態系統的無縫集成。它的一些主要功能包括支持內聯和外部 CSS、多頁 PDF 生成功能、高級樣式以及與伺服器端渲染的兼容性。 (SSR).

使用 React-pdf 創建 PDF 文件

在本節中，我們將重點介紹如何在 React 應用程式中使用 React-pdf 來創建 PDF 文件。首先，你需要安裝 React-pdf 套件：

npm install --save @React-pdf/renderer

如何在 React 中將 HTML 轉換為 PDF（開發者教程）：圖4 - react-pdf 套件

安裝後，您可以建立一個新的 React 組件來定義您的 PDF 文件結構：

    import React from "react";
    import {
      Document,
      Page,
      Text,
      View,
      StyleSheet,
      Image,
      Font,
    } from "@React-pdf/renderer";
    const invoiceData = {
      sender: {
        name: "John Doe",
        address: "123 Main Street",
        city: "New York",
        state: "NY",
        zip: "10001",
      },
      recipient: {
        name: "Jane Smith",
        address: "456 Elm Street",
        city: "San Francisco",
        state: "CA",
        zip: "94107",
      },
      items: [
        { description: "Item 1", quantity: 2, unitPrice: 10 },
        { description: "Item 2", quantity: 3, unitPrice: 15 },
        { description: "Item 3", quantity: 1, unitPrice: 20 },
      ],
      invoiceNumber: "INV-123456",
      date: "April 26, 2023",
    };
    const styles = StyleSheet.create({
      page: {
        backgroundColor: "#FFF",
        padding: 30,
      },
      header: {
        fontSize: 24,
        textAlign: "center",
        marginBottom: 30,
      },
      sender: {
        marginBottom: 20,
      },
      recipient: {
        marginBottom: 30,
      },
      addressLine: {
        fontSize: 12,
        marginBottom: 2,
      },
      itemsTable: {
        display: "table",
        width: "100%",
        borderStyle: "solid",
        borderWidth: 1,
        borderRightWidth: 0,
        borderBottomWidth: 0,
      },
      tableRow: {
        margin: "auto",
        flexDirection: "row",
      },
      tableColHeader: {
        width: "25%",
        borderStyle: "solid",
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
        backgroundColor: "#F0F0F0",
      },
      tableCol: {
        width: "25%",
        borderStyle: "solid",
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
      },
      tableCell: {
        fontSize: 12,
        textAlign: "center",
        padding: 5,
      },
      total: {
        marginTop: 20,
        textAlign: "right",
      },
      totalLabel: {
        fontSize: 14,
        fontWeight: "bold",
      },
      totalValue: {
        fontSize: 14,
      },
    });

    const InvoiceDocument = () => {
      const totalAmount = invoiceData.items.reduce(
        (total, item) => total + item.quantity * item.unitPrice,
        0
      );

      return (

            Invoice

              {invoiceData.sender.name}
              {invoiceData.sender.address}

                {invoiceData.sender.city}, {invoiceData.sender.state}{" "}
                {invoiceData.sender.zip}

              {invoiceData.recipient.name}

                {invoiceData.recipient.address}

                {invoiceData.recipient.city}, {invoiceData.recipient.state}{" "}
                {invoiceData.recipient.zip}

                  Description

                  Quantity

                  Unit Price

                  Amount

              {invoiceData.items.map((item, index) => (

                    {item.description}

                    {item.quantity}

                      {item.unitPrice.toFixed(2)}

                      {(item.quantity * item.unitPrice).toFixed(2)}

              ))}

              Total:
              ${totalAmount.toFixed(2)}

      );
    };

    export default InvoiceDocument;

    import React from "react";
    import {
      Document,
      Page,
      Text,
      View,
      StyleSheet,
      Image,
      Font,
    } from "@React-pdf/renderer";
    const invoiceData = {
      sender: {
        name: "John Doe",
        address: "123 Main Street",
        city: "New York",
        state: "NY",
        zip: "10001",
      },
      recipient: {
        name: "Jane Smith",
        address: "456 Elm Street",
        city: "San Francisco",
        state: "CA",
        zip: "94107",
      },
      items: [
        { description: "Item 1", quantity: 2, unitPrice: 10 },
        { description: "Item 2", quantity: 3, unitPrice: 15 },
        { description: "Item 3", quantity: 1, unitPrice: 20 },
      ],
      invoiceNumber: "INV-123456",
      date: "April 26, 2023",
    };
    const styles = StyleSheet.create({
      page: {
        backgroundColor: "#FFF",
        padding: 30,
      },
      header: {
        fontSize: 24,
        textAlign: "center",
        marginBottom: 30,
      },
      sender: {
        marginBottom: 20,
      },
      recipient: {
        marginBottom: 30,
      },
      addressLine: {
        fontSize: 12,
        marginBottom: 2,
      },
      itemsTable: {
        display: "table",
        width: "100%",
        borderStyle: "solid",
        borderWidth: 1,
        borderRightWidth: 0,
        borderBottomWidth: 0,
      },
      tableRow: {
        margin: "auto",
        flexDirection: "row",
      },
      tableColHeader: {
        width: "25%",
        borderStyle: "solid",
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
        backgroundColor: "#F0F0F0",
      },
      tableCol: {
        width: "25%",
        borderStyle: "solid",
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
      },
      tableCell: {
        fontSize: 12,
        textAlign: "center",
        padding: 5,
      },
      total: {
        marginTop: 20,
        textAlign: "right",
      },
      totalLabel: {
        fontSize: 14,
        fontWeight: "bold",
      },
      totalValue: {
        fontSize: 14,
      },
    });

    const InvoiceDocument = () => {
      const totalAmount = invoiceData.items.reduce(
        (total, item) => total + item.quantity * item.unitPrice,
        0
      );

      return (

            Invoice

              {invoiceData.sender.name}
              {invoiceData.sender.address}

                {invoiceData.sender.city}, {invoiceData.sender.state}{" "}
                {invoiceData.sender.zip}

              {invoiceData.recipient.name}

                {invoiceData.recipient.address}

                {invoiceData.recipient.city}, {invoiceData.recipient.state}{" "}
                {invoiceData.recipient.zip}

                  Description

                  Quantity

                  Unit Price

                  Amount

              {invoiceData.items.map((item, index) => (

                    {item.description}

                    {item.quantity}

                      {item.unitPrice.toFixed(2)}

                      {(item.quantity * item.unitPrice).toFixed(2)}

              ))}

              Total:
              ${totalAmount.toFixed(2)}

      );
    };

    export default InvoiceDocument;

JAVASCRIPT

現在，你可以使用 React-pdf 的 PDFDownloadLink 組件來下載生成的 PDF 文件：

    import React from 'react';
    import { PDFDownloadLink } from '@React-pdf/renderer';
    import InvoiceDocument from './InvoiceDocument';
    import './App.css';

    const App = () => (

          {({ blob, url, loading, error }) =>
            loading ? 'Loading document...' : 'Download Invoice'
          }

    );

    export default App;

    import React from 'react';
    import { PDFDownloadLink } from '@React-pdf/renderer';
    import InvoiceDocument from './InvoiceDocument';
    import './App.css';

    const App = () => (

          {({ blob, url, loading, error }) =>
            loading ? 'Loading document...' : 'Download Invoice'
          }

    );

    export default App;

JAVASCRIPT

現在在 App.css 中添加一些 CSS 樣式以自定義用戶界面：


    .app-container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #d1e8ff;
    }

    .download-button {
      display: inline-block;
      background-color: #5a8fd5;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      padding: 12px 24px;
      border-radius: 4px;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .download-button:hover {
      background-color: #3a68b7;
    }

在瀏覽器中開啟 localhost:3000。

如何在 React 中將 HTML 轉換為 PDF (開發人員教程): 圖 5 - React PDF 在 localhost 運行

當您按下下載按鈕時，將會下載 PDF 檔案。

如何在 React 中將 HTML 轉換為 PDF（開發者教程）：圖 6 - 下載的發票

以下是從 HTML 文件生成的 PDF 文件的輸出：

如何在 React 中將 HTML 轉換為 PDF（開發者教程）：圖 7 - 文件輸出

樣式化您的 PDF 文件

React-pdf 庫支持多種樣式選項，類似於 CSS。以下是一些您可以用來自訂 PDF 文件外觀的常見樣式屬性：

color：設置文字顏色。
fontSize：設置文字的字體大小。
fontFamily：設置文字的字體系列。
textAlign：設置文字對齊方式。 (例如，'left'，'right'，'center'，或 'justify')* margin：設置元素周圍的外邊距。
padding：設置元素內部的填充。
border：設置元素的邊框。
backgroundColor：設置元素的背景顏色。

React 開發者的替代 PDF 函式庫

IronPDF for Node.js 是在 React 中將 HTML 轉換為 PDF 的絕佳替代方案。由 IronSoftware 開發，這是一個強大的函式庫，使開發人員能夠直接從其 Node.js 應用程序生成和操作 PDF 文件。IronPDF 的一個突出功能是它在生成 PDF 期間能處理 HTML 內容中 JavaScript 的執行，從而實現動態和交互式的 PDF 創建。

IronPDF 支援包括 Windows、MacOS、Linux、Docker 以及如 Azure 和 AWS 的雲平台，確保了跨平台的兼容性。其用戶友好的 API 使開發人員能夠快速將 PDF 生成和操作集成到他們的 Node.js 項目中。

React 是一個用於構建用戶界面的 JavaScript 函式庫，既然 IronPDF 是為 Node.js 構建的，您可以通過使用其 Node.js API 將 IronPDF 集成到您的 React 應用程序中。

以下是一個如何將 IronPDF 與 React 一起使用的概述：

安裝 IronPDF：您可以使用 npm 或 yarn 將 IronPDF 安裝到您的 React 項目中。

  npm install @ironsoftware/ironpdf

與 React 元件整合：您可以創建利用 IronPDF 生成和操作 PDF 的 React 元件。例如，您可以創建一個元件，將 HTML 內容作為輸入，並使用 IronPDF 的 API 將其轉換為 PDF。

  import React from 'react';
  import { PdfDocument } from '@ironsoftware/ironpdf';

  const HTMLToPDFComponent = () => {
      const convertHTMLToPDF = async (htmlContent) => {
          try {
              const pdf = await PdfDocument.fromHtml(htmlContent);
              await pdf.saveAs('generated_pdf.pdf');
              alert('PDF generated successfully!');
          } catch (error) {
              console.error('Error generating PDF:', error);
          }
      };

      return (
          <div>
              {/* Input HTML content */}
              <textarea onChange={(e) => convertHTMLToPDF(e.target.value)} />
          </div>
      );
  };

  export default HTMLToPDFComponent;

  import React from 'react';
  import { PdfDocument } from '@ironsoftware/ironpdf';

  const HTMLToPDFComponent = () => {
      const convertHTMLToPDF = async (htmlContent) => {
          try {
              const pdf = await PdfDocument.fromHtml(htmlContent);
              await pdf.saveAs('generated_pdf.pdf');
              alert('PDF generated successfully!');
          } catch (error) {
              console.error('Error generating PDF:', error);
          }
      };

      return (
          <div>
              {/* Input HTML content */}
              <textarea onChange={(e) => convertHTMLToPDF(e.target.value)} />
          </div>
      );
  };

  export default HTMLToPDFComponent;

JAVASCRIPT

處理 PDF 生成：在您的 React 組件中使用 IronPDF 的功能來處理 PDF 的生成、操作與保存。您可以使用 IronPDF 的方法來進行轉換。 HTML 字串, 網址，或圖像到 PDF。
渲染 PDF：使用 IronPDF 生成 PDF 後，您可以使用適當的組件或庫在您的 React 應用程序中渲染它們，以顯示 PDF 文件。

  import React from 'react';

  const PDFViewerComponent = () => {
      return (
          <div>
              {/* Render PDF using appropriate component or library */}
              <iframe src="generated_pdf.pdf" width="100%" height="600px" title="PDF Viewer" />
          </div>
      );
  };

  export default PDFViewerComponent;

  import React from 'react';

  const PDFViewerComponent = () => {
      return (
          <div>
              {/* Render PDF using appropriate component or library */}
              <iframe src="generated_pdf.pdf" width="100%" height="600px" title="PDF Viewer" />
          </div>
      );
  };

  export default PDFViewerComponent;

JAVASCRIPT

有了IronPDF，開發人員可以高效地從各種來源生成專業級PDF文檔，並根據其具體需求進行自訂，無縫集成PDF生成功能到他們的.NET應用程序中。IronPDF還支援先進功能，例如CSS、JavaScript和自訂字體，確保生成的PDF文件能符合您的應用程序的設計和需求。