对许多 Web 应用程序而言，文档处理能力直接关系到用户的工作效率，尤其在报告生成和数据整理等场景中。React 依托其基于组件的设计理念，为前端开发提供了理想的支撑。通过集成 Spire.PDF for JavaScript，您可以在 React 应用程序中轻松创建和管理 PDF 文档。

本指南将逐步介绍如何将 Spire.PDF for JavaScript 集成到您的 React 项目中，涵盖环境搭建和使用示例。

• 在 React 中集成 Spire.PDF for JavaScript
  • 在 React 中使用 Spire.PDF for JavaScript 的优势
  • 设置开发环境
  • 在项目中集成 Spire.PDF for JavaScript
  • 使用 JavaScript 创建 PDF 文件
  • 获取免费许可证

在 React 中使用 Spire.PDF for JavaScript 的优势

React 以组件化方式构建用户界面，是现代 Web 开发的主流选择。Spire.PDF for JavaScript 为 Web 应用提供开箱即用的 PDF 处理能力，两者的结合让您在浏览器中即可完成文档的创建、编辑与导出。

将 Spire.PDF for JavaScript 集成到 React 项目中，可以：

• 提升开发效率：无需后端服务或第三方工具，在前端直接生成和修改 PDF 文档。
• 扩大使用范围：生成的标准 PDF 文档可跨设备、跨平台流转，便于分发和协作。
• 覆盖多样需求：文本绘制、图像插入、页面管理等功能一应俱全，满足绝大多数文档场景。
• 降低集成成本：与 React 等主流框架无缝配合，可快速接入现有项目而不干扰既有流程。

设置开发环境

步骤 1. 安装 React 和 npm

从官方网站下载并安装 Node.js。请确保选择与您的操作系统相匹配的版本。

安装完成后，您可以在终端中运行以下命令来验证 Node.js 和 npm 是否正常工作：

步骤 2. 创建一个新的 React 项目

在终端中使用 Create React App 创建一个名为 my-app 的新 React 项目：

npx create-react-app my-app

如果您的 React 项目编译成功，应用程序将在 http://localhost:3000 上运行，您可以在浏览器中查看和测试您的应用程序。

要直观地浏览和管理项目中的文件，您可以使用 VS Code 打开该项目。

在项目中集成 Spire.PDF for JavaScript

从我们的网站下载 Spire.PDF for JavaScript，并将其解压到磁盘上的某个位置。下载的产品包集成了 Spire.Doc for JavaScript、Spire.XLS for JavaScript、Spire.PDF for JavaScript 和 Spire.Presentation for JavaScript。要使用 Spire.PDF for JavaScript 的功能，您需要将相应的文件（spire.pdf.js、Spire.Pdf.Wasm.zip、spire.common.js、Spire.Common.Wasm.zip 以及 _framework 文件夹）复制到项目的 public 文件夹中。

您也可以使用 npm 进行安装。在 VS Code 的终端中运行以下命令：

npm i spire.office

安装完成后，产品包文件将保存在项目的 node_modules/spire.office 路径中。将上面提到的 5 个文件复制到 React 项目的 "public" 文件夹中。

为了确保文本正确渲染，您可以通过自定义路径添加相关的字体文件。在以下示例中，字体被添加到路径：public\。

使用 JavaScript 创建 PDF 文件

修改 App.js 文件中的代码，使用 WebAssembly（WASM）模块生成 PDF 文件。文档的创建与导出操作由 Spire.PDF for JavaScript 库完成。

以下是完整代码：

import React, { useState, useEffect } from 'react';

function App() {
  const [wasmModule, setWasmModule] = useState(null);
  // 加载 Spire.PDF
  useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.js`);
        const rawModule = spireModule.default || spireModule;
        window.wasmModule = typeof rawModule === 'function'
          ? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
          : rawModule;
        setWasmModule(window.wasmModule);
      } catch (error) {
        console.error('加载 spire.pdf.js WASM 模块失败:', error);
      }
    })();
  }, []);

  // 生成 PDF 文件的函数
  const createPdf = async () => {
    const pdfModule = window.wasmModule?.spirepdf;
    if (pdfModule) {

      // 将 arial.ttf 字体文件加载到虚拟文件系统（VFS）中
      await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);

      // 指定输出文件名
      const outputFileName = 'HelloWorld.pdf';

      // 创建一个新的 PDF 文档
      const doc = new pdfModule.PdfDocument();

      // 添加一页
      let page = doc.Pages.Add();

      // 创建字体和画刷
      let font = new pdfModule.PdfTrueTypeFont({
        fontFamily: 'Arial',
        size: 12,
        style: pdfModule.PdfFontStyle.Regular,
        unicode:true
      });

      let brush = new pdfModule.PdfSolidBrush({pdfRGBColor: new pdfModule.PdfRGBColor({color: pdfModule.Color.get_Blue()})});

      // 在页面的指定位置绘制文本
      page.Canvas.DrawString({ s: "Hello World!", font: font, brush: brush, x: 20, y: 30 });

      // 将文档保存为 PDF 文件
      doc.SaveToFile({ fileName: outputFileName, fileFormat: pdfModule.FileFormat.PDF });

      // 读取保存的文件并将其转换为 Blob 对象
      const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
      const modifiedFile = new Blob([modifiedFileArray], { type: 'application/pdf' });

      // 为 Blob 创建 URL 并启动下载
      const url = URL.createObjectURL(modifiedFile);
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);

      // 清理资源
      doc.Close();
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>在 React 中使用 JavaScript 创建 PDF 文件</h1>
      <button onClick={createPdf} disabled={!wasmModule}>
        生成
      </button>
    </div>
  );
}

export default App;

通过在 VS Code 的终端中输入以下命令来启动开发服务器：

npm start

React 应用程序编译成功后，它将在您的默认浏览器中打开，通常地址为 http://localhost:3000。点击"生成"按钮即可创建并下载 "HelloWorld.pdf" 文件。

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。