PDF 工具

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

雷根·彭
雷根·彭
2023年五月16日
分享:

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

生成 PDF 的常用库

在深入了解将HTML转换为PDF的过程之前,让我们讨论一些您可以在React应用中使用的流行PDF生成库:

  1. React-pdf:在 React 应用中创建 PDF 文档的强大库。 它支持各种样式选项,可以轻松创建复杂的多页 PDF。

  2. jsPDF:一种广泛使用的 JavaScript 库,用于即时生成 PDF 文件。 它提供了广泛的功能,包括文本样式、图片嵌入等。

  3. html2canvas:这个库可以让你捕获HTML元素的截图,并将其转换为canvas对象,然后可以使用其他库如jsPDF将其转换为PDF。

在 React 中将 HTML 转换为 PDF 的先决条件

熟悉 React 及其生态系统

在将 HTML 转换为 PDF 之前,对 React 有扎实的了解至关重要。 这包括有关 JSX、状态管理、组件生命周期和钩子的知识。

了解 HTML、CSS 和 JavaScript

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

React 应用程序入门

在我们进行将HTML 转换为 React 中的 PDF之前,让我们快速了解如何使用流行的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 应用

步骤 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 to 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;
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;
JAVASCRIPT

现在在App.css中添加一些CSS样式以实现自定义UI:


    .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 应用程序中。

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

  1. 安装 IronPDF:您可以使用 npm 或 yarn 在 React 项目中安装 IronPdf。
  npm install @ironsoftware/ironpdf
  1. 与 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;
JAVASCRIPT
  1. 处理 PDF 生成:在您的 React 组件中利用 IronPdf 的功能来处理 PDF 的生成、操作和保存。 您可以使用IronPDF的方法将HTML字符串URL图像转换为PDF。

  2. 渲染 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;
JAVASCRIPT

有了 IronPDF,开发人员可以高效地从各种来源生成专业级的 PDF 文档,根据自己的具体要求进行定制,并将 PDF 生成功能无缝集成到他们的 .NET 应用程序中。 IronPDF 还支持 CSS、JavaScript 和自定义字体等高级功能,确保您生成的 PDF 文件与应用程序的设计和要求相匹配。

结论

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

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

IronPDF 提供免费试用版,让您可以在购买之前测试该库并确定其是否符合您的需求。 试用期结束后,IronPDF 购买许可证 起价为 $749,其中包括优先支持和更新。 此外,IronPDF 也适用于其他语言,如C# .NETJavaPython。 通过从 IronPDF for Node.js 开始下载 IronPDF 库并尝试使用。

雷根·彭
软件工程师
Regan毕业于雷丁大学,拥有电子工程学士学位。在加入Iron Software之前,他的前工作职位要求他专注于单一任务;他在Iron Software最喜欢的是能进行多种工作,无论是增加销售价值、技术支持、产品开发还是营销。他喜欢了解开发人员如何使用Iron Software的库,并利用这些知识不断改进文档和开发产品。
< 前一页
如何在JavaScript中打印PDF文件

准备开始了吗? 版本: 2025.3 刚刚发布

查看许可证 >