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。您可以从以下网址下载最新版本的 Node.jsNode.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 文件的外观：

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

下面概述了如何将 IronPDF 与 React 结合使用：

安装 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

处理 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 文件与应用程序的设计和要求相匹配。

结论

在本文中，我们介绍了使用React-pdf库在React中将HTML转换为PDF的过程。我们讨论了PDF 生成的流行库、如何使用React-pdf创建和样式化PDF 文件，以及生成更复杂 PDF 文档的其他选项。

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

IronPDF 提供一个免费试用版此外，我们还将为您提供一个 "试用版"，让您可以在购买之前测试该库并确定它是否满足您的需求。试用期结束后，IronPDF购买许可证从 $749开始，其中包括优先支持和更新。此外，IronPDF 还可用于其他语言，如C# .NET, Java和Python. 通过以下方式下载 IronPDF 库从 IronPDF for Node.js 开始并试一试。

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