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

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

熟悉 React 及其生態系統

在進行 HTML 到 PDF 轉換之前，對 React 有一個紮實的理解是至關重要的。這包括對 JSX、狀態管理、組件生命週期和鉤子的了解。

了解 HTML、CSS 和 JavaScript

掌握 HTML、CSS 和 JavaScript 的基礎知識對於使用 React-pdf 庫來說是必不可少的。這包括對 HTML 元素和屬性的知識、CSS 樣式和選擇器，以及 JavaScript 基本概念，如變數、函式和迴圈。

開始使用 React 應用程式

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

步驟 1 安裝 Node.js

確保您的機器上已安裝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 應用程序

步驟 3 建立新的 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 應用程序

步驟 5 實現 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 的絕佳替代方案。由 Iron Software 開發，這是一個強大的庫，允許開發人員直接從他們的 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 應用程式中。

以下是如何在 React 中使用 IronPDF 的大綱：

安裝 IronPDF：您可以使用 npm 或 yarn 在您的 React 專案中安裝 IronPDF。

  npm install @ironsoftware/ironpdf

與 React 組件整合：您可以創建使用 IronPDF 來生成和處理 PDF 的 React 組件。例如，您可以使用 IronPDF 的 API 創建一個元件，該元件將 HTML 內容作為輸入並將其轉換為 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 生成：使用 IronPDF 的功能在您的 React 元件中處理 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 文件符合您的應用程式設計和需求。

結論

在本文中，我們介紹了使用 React-pdf 庫將 HTML 轉換為 PDF 在 React 中 的過程。我們討論了熱門的PDF生成庫，如何使用React-pdf創建和設計PDF文件，以及生成更複雜PDF文件的其他選擇。

按照本指南，您現在應該對如何在您的 React 應用程式中生成 PDF 文件有了深入的了解，使您能夠生成高品質的 PDF 文件並滿足各種使用情境的需求。

IronPDF 提供一個免費試用版，讓您可以測試該庫並確定它是否符合您的需求，然後再決定是否購買。試用期結束後，IronPDF購買許可證從 $749 開始，包含優先支援和更新。此外，IronPDF 也提供其他語言版本，如C# .NET, Java，和Python. 下載IronPDF庫，通過從 IronPDF for Node.js 開始試試看。

< 上一頁
如何在 JavaScript 中列印 PDF 文件