node -v
npm -v

npx create-react-app my-app

cd my-app
npm start

npm i spire.xls

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

function App() {

  // 保存已加载的 WASM 模块
  const [wasmModule, setWasmModule] = useState(null);

  // 在组件挂载时加载 WASM 模块
  useEffect(() => { 
    const loadWasm = async () => {
      try {

        // 通过全局窗口对象访问模块和 spirexls
        const { Module, spirexls } = window;

        // 在初始化运行时设置 wasmModule 状态
        Module.onRuntimeInitialized = () => {
          setWasmModule(spirexls);
        };
      } catch (err) {

        // 记录加载过程中出现的任何错误
        console.error('Failed to load WASM module:', err);
      }
    };

    // 创建脚本元素来加载 WASM 相关的 JavaScript 文件
    const script = document.createElement('script');
    script.src = `${process.env.PUBLIC_URL}/Spire.Xls.Base.js`;
    script.onload = loadWasm;

    // 将脚本添加到文档正文中
    document.body.appendChild(script);

    // 在组件卸载时执行删除脚本的清理函数
    return () => {
      document.body.removeChild(script);
    };
  }, []); 

  // 执行创建 Excel 文件的函数
  const createExcel = async () => {
    if (wasmModule) {

      // 将 ARIALUNI.TTF 字体文件载入虚拟文件系统 (VFS)
      await wasmModule.FetchFileToVFS('ARIALUNI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);

      // 创建新工作簿
      const workbook = wasmModule.Workbook.Create();
      
      // 清除默认工作表
      workbook.Worksheets.Clear();
      
      // 添加新工作表
      const sheet = workbook.Worksheets.Add("工作表");
      
      // 在单元格 “A1” 中设置文本
      sheet.Range.get("A1").Text = "Hello World";
      
      // 自适应列宽
      sheet.Range.get("A1").AutoFitColumns();
      
      // 指定输出文档名称
      const outputFileName = 'HelloWorld.xlsx';
      
      // 将工作簿保存到指定路径
      workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2010 });
      
      // 读取保存的文件并将其转换为 Blob 对象
      const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
      const modifiedFile = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      
      // 为 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); 

      // 清理工作簿占用的资源
      workbook.Dispose();
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>在 React 项目中使用 JavaScript 生成 Excel 文档</h1>
      <button onClick={createExcel} disabled={!wasmModule}>
        生成
      </button>
    </div>
  );
}

export default App;

npm start