PDF 工具

如何在React中将HTML转换为PDF（开发者教程）

发布 2023年五月16日

在 React 中将 HTML 转换为 PDF 已成为许多网络应用程序的基本功能。无论您是在构建发票系统、报告生成器，还是仅仅需要以普遍接受的格式共享信息，PDF 生成都是至关重要的。在本文中，我们将探讨如何使用流行的库将 HTML 转换为 PDF，从而在 React 应用程序中创建和样式化 PDF 文件。

如何在 React 中将 HTML 转换为 PDF

创建和配置 React 项目
下载库，使用 npm 在 React 中将 HTML 转换为 PDF
从 React-pdf/renderer 中导入必要的模块
使用导入的模块配置 HTML 页面
利用 PDFDownloadLink 模块将 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、状态管理、组件生命周期和钩子的知识。

了解 HTML、CSS 和 JavaScript

要使用 React-pdf 库，必须具备扎实的 HTML、CSS 和 JavaScript 基础。这包括 HTML 元素和属性、CSS 样式和选择器以及 JavaScript 基本知识（如变量、函数和循环）。

开始使用 React 应用程序

在使用 React 将 **HTML 转换为 PDF 之前，让我们先快速了解一下如何使用流行的 create-react-app CLI 工具创建一个新的 React 应用程序。这将为我们的 PDF 生成示例奠定基础。

第 1 步安装 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 - 在 localhost 上运行的实时 react 应用程序

第 5 步实现 PDF 生成

现在，您已经建立了 React 应用程序，可以按照本文前几节所述的步骤，使用React-pdf等流行库实现HTML 到 PDF 的 React 转换。

介绍 React-pdf 库

React-pdf 是专为 React 应用程序设计的流行库，可与 React 生态系统无缝集成。它的一些主要功能包括支持内联和外部 CSS、多页 PDF 生成、高级样式设计以及与服务器端渲染兼容。 (SSR).

使用 React-pdf 创建 PDF 文件

在本节中，我们将重点介绍如何使用 React-pdf 在 React 应用程序中创建 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 - 在 localhost 中运行 React PDF

点击下载按钮后，PDF 文件将被下载。

如何在 React 中将 HTML 转换为 PDF（开发人员教程）：图 6 - 下载的发票

以下是从 HTML 文档输出的 PDF 文件：

如何在 React 中将 HTML 转换为 PDF（开发人员教程）：图 7 - 文档输出

PDF 文件的样式

React-pdf库支持多种样式选项，与CSS类似。以下是一些常用的样式属性，您可以用来定制 PDF 文件的外观：

color：设置文本颜色。
fontSize：设置文本的字体大小。
fontFamily：设置文本的字体家族。
textAlign：设置文本对齐方式 (例如，"左"、"右"、"中 "或 "对齐).
margin：设置元素周围的边距。
padding：设置元素内部的 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 结合使用：

1.安装 IronPDF：您可以使用 npm 或 yarn 在 React 项目中安装 IronPDF。

  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

3.处理 PDF 生成：利用 React 组件中的 IronPDF 功能来处理 PDF 生成、操作和保存。您可以使用 IronPDF 的方法来转换 HTML 字符串, 网址，或者图像到 PDF 文件。

4.渲染 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 库在 React 中将 HTML 转换为 PDF 的过程。我们讨论了PDF生成的常用库、如何使用React-pdf创建和样式化PDF文件**，以及生成更复杂的PDF文档的其他选项。

通过学习本指南，您现在应该对如何在 React 应用程序中生成 PDF 文件有了扎实的了解，从而能够生成高质量的 PDF 文件并满足各种用例的需求。

IronPDF 提供了免费试用在试用期结束后，IronPDF 可让您测试该库，并在承诺购买之前确定其是否满足您的需求。试用期结束后，IronPDF 许可证从 $749开始，其中包括优先支持和更新。此外，还可用于其他语言，如 C# .NET, Java 和 Python.从以下网址下载资料库这里并试一试。

< 前一页
如何在JavaScript中打印PDF文件