react-jsonschema-form表单数据导出为Excel文档方案

【免费下载链接】react-jsonschema-form 项目地址: https://gitcode.com/gh_mirrors/rea/react-jsonschema-form

在使用react-jsonschema-form构建表单应用时，经常需要将用户填写的数据导出为Excel文档以便存档或进一步处理。本文将详细介绍如何通过监听表单提交事件获取数据，并结合SheetJS库实现Excel导出功能，完整覆盖从数据获取到文件下载的全流程。

表单数据获取基础

react-jsonschema-form的核心组件Form提供了完整的数据管理能力，通过onSubmit回调函数可以获取用户提交的表单数据。Form组件定义在packages/core/src/components/Form.tsx中，其接收的onSubmit参数类型为：

onSubmit?: (data: IChangeEvent<T, S, F>, event: FormEvent<any>) => void;

当用户点击提交按钮时，该回调会接收包含表单数据的IChangeEvent对象，其中data属性即为表单的结构化数据。典型的表单使用方式如下：

import Form from "react-jsonschema-form";

const schema = {
  type: "object",
  properties: {
    name: { type: "string", title: "姓名" },
    email: { type: "string", title: "邮箱", format: "email" },
    age: { type: "number", title: "年龄" }
  }
};

function MyForm() {
  const onSubmit = (data) => {
    console.log("表单数据:", data.formData);
    // 此处将添加Excel导出逻辑
  };

  return <Form schema={schema} onSubmit={onSubmit} />;
}

上述代码中，data.formData包含了用户填写的表单数据，其结构与JSON Schema定义完全一致，这为后续的数据处理提供了标准化格式。

Excel导出实现方案

技术选型与依赖安装

由于react-jsonschema-form本身未提供Excel导出功能，我们需要集成第三方库来实现这一需求。SheetJS(即xlsx库)是一个功能强大的JavaScript电子表格处理库，支持多种格式的读写操作。通过npm安装所需依赖：

npm install xlsx file-saver --save

其中xlsx负责Excel文件的生成，file-saver提供文件下载功能。

完整导出功能实现

在获取表单数据后，我们需要将其转换为Excel工作簿并触发下载。以下是完整的实现代码：

import Form from "react-jsonschema-form";
import XLSX from "xlsx";
import { saveAs } from "file-saver";

function MyForm() {
  const exportToExcel = (formData) => {
    // 创建工作簿和工作表
    const workbook = XLSX.utils.book_new();
    const worksheet = XLSX.utils.json_to_sheet([formData]);
    
    // 将工作表添加到工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, "表单数据");
    
    // 生成Excel文件并下载
    const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
    const data = new Blob([excelBuffer], { type: "application/octet-stream" });
    saveAs(data, "表单数据导出.xlsx");
  };

  const onSubmit = (data) => {
    exportToExcel(data.formData);
  };

  return <Form schema={schema} onSubmit={onSubmit} />;
}

高级应用：数组数据处理

当表单包含数组类型字段时(如多条目数据)，需要特殊处理以确保Excel格式正确。例如，对于以下Schema定义：

{
  "type": "object",
  "properties": {
    "name": { "type": "string", "title": "项目名称" },
    "members": {
      "type": "array",
      "title": "团队成员",
      "items": {
        "type": "object",
        "properties": {
          "name": { "type": "string", "title": "姓名" },
          "role": { "type": "string", "title": "角色" }
        }
      }
    }
  }
}

需要将数组数据单独创建工作表：

const exportToExcel = (formData) => {
  const workbook = XLSX.utils.book_new();
  
  // 主表单数据
  const mainSheet = XLSX.utils.json_to_sheet([{
    "项目名称": formData.name
  }]);
  XLSX.utils.book_append_sheet(workbook, mainSheet, "项目信息");
  
  // 数组数据单独创建工作表
  if (formData.members && formData.members.length > 0) {
    const membersSheet = XLSX.utils.json_to_sheet(formData.members);
    XLSX.utils.book_append_sheet(workbook, membersSheet, "团队成员");
  }
  
  // 导出文件
  const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
  const data = new Blob([excelBuffer], { type: "application/octet-stream" });
  saveAs(data, "项目信息导出.xlsx");
};

集成到现有项目

组件化实现

为提高复用性，可以将导出功能封装为自定义Hook：

// useExcelExport.js
import XLSX from "xlsx";
import { saveAs } from "file-saver";

export function useExcelExport() {
  const exportToExcel = (data, fileName = "数据导出.xlsx") => {
    const workbook = XLSX.utils.book_new();
    const worksheet = XLSX.utils.json_to_sheet([data]);
    XLSX.utils.book_append_sheet(workbook, worksheet, "数据");
    
    const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
    const blobData = new Blob([excelBuffer], { type: "application/octet-stream" });
    saveAs(blobData, fileName);
  };
  
  return { exportToExcel };
}

在表单组件中使用：

import { useExcelExport } from "./useExcelExport";

function MyForm() {
  const { exportToExcel } = useExcelExport();
  
  const onSubmit = (data) => {
    exportToExcel(data.formData, "用户信息.xlsx");
  };
  
  return <Form schema={schema} onSubmit={onSubmit} />;
}

处理复杂嵌套结构

对于深度嵌套的表单数据，可以使用xlsx库的json_to_sheet方法配合flatten函数将嵌套对象展平：

import { flatten } from "lodash";

// 展平嵌套对象
const flattenedData = flatten(formData);
const worksheet = XLSX.utils.json_to_sheet([flattenedData]);

常见问题解决方案

中文乱码问题

确保在生成Blob时指定正确的MIME类型：

const data = new Blob([excelBuffer], { 
  type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" 
});

大数据量导出优化

对于包含大量数据的表单，考虑分批次处理或使用Web Worker避免UI阻塞：

// 使用Web Worker处理大数据
const worker = new Worker("/excelWorker.js");
worker.postMessage(formData);
worker.onmessage = (e) => {
  saveAs(e.data, "大数据导出.xlsx");
};

自定义Excel样式

通过xlsx-style库可以为Excel添加自定义样式，如设置表头背景色：

import XLSX from "xlsx-style";

// 设置表头样式
const headerStyle = {
  fill: { fgColor: { rgb: "FFFF00" } },
  font: { bold: true }
};

// 应用样式
worksheet["A1"].s = headerStyle;

总结与扩展

本文介绍了react-jsonschema-form表单数据导出为Excel的完整方案，包括基础实现、数组数据处理、组件化封装和常见问题解决。该方案已在实际项目中验证，适用于各种复杂度的表单数据导出需求。

对于更高级的需求，可以考虑：

• 添加数据验证确保导出数据的完整性
• 实现Excel模板导入功能
• 集成图表生成功能可视化表单数据

完整实现代码可参考项目中的playground示例，其中包含了更多高级用法和最佳实践。

通过这种方式，您可以轻松地为react-jsonschema-form表单添加专业的Excel导出功能，提升用户体验和数据管理效率。

【免费下载链接】react-jsonschema-form 项目地址: https://gitcode.com/gh_mirrors/rea/react-jsonschema-form