前端 React 怎么实现导入导出 Excel 文件

前端 React 怎么实现导入导出 Excel 文件

首页 / 常见问题 / 低代码开发 / 前端 React 怎么实现导入导出 Excel 文件

作者：低代码开发工具发布时间：10-24 11:10 浏览量：9392

织信企业级低代码开发平台

提供表单、流程、仪表盘、API等功能，非IT用户可通过设计表单来收集数据，设计流程来进行业务协作，使用仪表盘来进行数据分析与展示，IT用户可通过API集成第三方系统平台数据。

前端React实现导入导出Excel文件的核心技术包括使用第三方库、利用HTML5新特性、调用后端api。在这些技术中，使用第三方库是最为常见和高效的方法。第三方库如xlsx和SheetJS等，提供了一套简单的API用于在前端环境中处理Excel文件的读取和写入。这些库抽象了文件解析的复杂性，让开发者可以更加专注于业务逻辑的实现。

一、使用第三方库处理Excel

在React项目中，使用xlsx库是实现Excel文件导入导出的一个非常流行的选择。xlsx库不仅支持Excel文件的读写，还兼容多种格式，如CSV、TXT等，使其成为处理电子表格数据的强大工具。

导入Excel文件

首先，通过npm或yarn安装xlsx库到你的项目中。
```
npm install xlsx
```
或
```
yarn add xlsx
```
接下来，在组件中使用HTML的<input type="file" />元素让用户选择文件。然后，利用xlsx库中的read方法处理这个文件，将文件内容读取为JavaScript能够处理的数据格式。

import XLSX from 'xlsx';
function ImportExcel() {
  const handleFile = (e) => {
    const files = e.target.files;
    if (files && files[0]) {
      const file = files[0];
      const reader = new FileReader();
      reader.onload = (evt) => {
        const bstr = evt.target.result;
        const wb = XLSX.read(bstr, { type: 'binary' });
        const wsname = wb.SheetNames[0];
        const ws = wb.Sheets[wsname];
        const data = XLSX.utils.sheet_to_json(ws);
        console.log(data);
      };
      reader.readAsBinaryString(file);
    }
  };
  return <input type="file" onChange={handleFile} />;
}
export default ImportExcel;

导出Excel文件

当需要将数据导出为Excel文件时，同样使用xlsx库的write方法来创建电子表格，并利用book_new和aoa_to_sheet函数将数据转换为工作表。
使用HTML5的Blob对象和saveAs函数（通常来自FileSaver库）来生成并保存文件供用户下载。

import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
function exportToExcel(apiData, fileName) {
  const ws = XLSX.utils.json_to_sheet(apiData);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "DataSheet");
  const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
  const data = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
  FileSaver.saveAs(data, fileName + '.xlsx');
}

二、利用HTML5新特性

在现代浏览器中，HTML5引入了一些新的文件和数据处理API，如FileReader、Blob和URL.createObjectURL()。这些API的使用，让在浏览器端处理文件变得更加简单且不依赖于后端服务。

文件读取

使用<input type="file" />捕获用户上传的文件，然后利用FileReaderAPI读取文件内容。FileReader支持多种读取方式，如读取为文本(readAsText)、读取为DataURL(readAsDataURL)或读取为二进制字符串(readAsBinaryString)。
读取文件后，可以将文件内容转化为所需的格式进行进一步处理或展示。

生成文件

利用Blob对象可以在前端直接生成文件内容。Blob构造函数接受一个内容数组和一个包含文件类型的选项对象作为参数。
通过URL.createObjectURL(blob)可以生成指向该Blob的URL，这个URL可以用于<a>标签的href属性中，实现点击下载功能。

三、调用后端API

在一些复杂的场景下，或者出于安全、性能考虑，可能会选择在后端处理Excel文件的导入导出。这时，前端的任务就转变为实现一个良好的用户界面，与后端服务进行交互。

导入Excel文件

与使用第三方库类似，在前端采用<input type="file" />来让用户选择文件。
通过FormData构建一个POST请求，将文件作为请求体的一部分发送到后端。后端接收到文件后，进行解析和处理。

导出Excel文件

对于导出功能，前端发送请求给后端，请求生成Excel文件。后端处理完毕后，可以选择直接返回文件流，或者返回一个含有文件URL的响应。
前端接收到后端的响应后，通过创建动态的<a>标签并设置href为文件URL，实现点击下载。如果是文件流，也可以使用前文提到的Blob和URL.createObjectURL()方式处理后端返回的数据。

通过结合使用第三方库、HTML5新特性以及后端API，React应用可以灵活地实现Excel文件的导入导出功能。这不仅提升了应用的交互性，也极大地增强了用户的体验。

相关问答FAQs：

1. 如何使用 React 实现导入 Excel 文件？

要在 React 中导入 Excel 文件，可以使用一些第三方库来处理。例如，可以使用 xlsx 库来解析 Excel 文件。首先，你需要在项目中安装 xlsx 库。然后，通过使用 FileReader 来读取用户选择的 Excel 文件。一旦文件被读取，将其传递给 xlsx 库进行解析，然后将解析的数据用于你的组件。

以下是一个示例代码片段，展示了如何在 React 中实现导入 Excel 文件的功能：

import React, { useState } from 'react';
import * as XLSX from 'xlsx';

function ImportExcel() {
  const [excelData, setExcelData] = useState([]);

  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onload = (e) => {
      const data = new Uint8Array(e.target.result);
      const workbook = XLSX.read(data, { type: 'array' });

      const worksheet = workbook.Sheets[workbook.SheetNames[0]];
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

      setExcelData(jsonData);
    };

    reader.readAsArrayBuffer(file);
  };

  return (
    <div>
      <input type="file" onChange={handleFileUpload} />
      {excelData && (
        <table>
          <tbody>
            {excelData.map((row, index) => (
              <tr key={index}>
                {row.map((cell, cellIndex) => (
                  <td key={cellIndex}>{cell}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

export default ImportExcel;

2. 如何使用 React 实现导出 Excel 文件？

在 React 中将数据导出为 Excel 文件可以使用 xlsx 库。首先，你需要安装 xlsx 库。然后，将数据转化为适合导出的格式，并使用 xlsx 库将其转换为 Excel 文件。

以下是一个示例代码片段，展示了如何在 React 中实现导出 Excel 文件的功能：

import React from 'react';
import * as XLSX from 'xlsx';

function ExportExcel({ data }) {
  const exportToExcel = () => {
    const workbook = XLSX.utils.book_new();
    const worksheet = XLSX.utils.json_to_sheet(data);

    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet 1');

    const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });

    const s2ab = (s) => {
      const buf = new ArrayBuffer(s.length);
      const view = new Uint8Array(buf);
      for (let i = 0; i < s.length; i++) {
        view[i] = s.charCodeAt(i) & 0xff;
      }
      return buf;
    };

    const fileData = wbout;

    const blob = new Blob([s2ab(fileData)], { type: 'application/octet-stream' });

    const url = URL.createObjectURL(blob);

    const link = document.createElement('a');
    link.href = url;
    link.download = 'data.xlsx';

    link.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div>
      <button onClick={exportToExcel}>Export to Excel</button>
    </div>
  );
}

export default ExportExcel;

3. 如何在 React 中实现同时导入和导出 Excel 文件？

要在 React 中实现同时导入和导出 Excel 文件的功能，你可以结合上述两个示例代码片段的方法。首先，实现一个用于导入 Excel 文件的组件，然后将导入的数据传递给另一个用于导出 Excel 文件的组件。

以下是一个示例代码片段，演示了在 React 中同时导入和导出 Excel 文件的功能：

import React, { useState } from 'react';
import * as XLSX from 'xlsx';

function ImportExportExcel() {
  const [excelData, setExcelData] = useState([]);

  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onload = (e) => {
      const data = new Uint8Array(e.target.result);
      const workbook = XLSX.read(data, { type: 'array' });

      const worksheet = workbook.Sheets[workbook.SheetNames[0]];
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

      setExcelData(jsonData);
    };

    reader.readAsArrayBuffer(file);
  };

  const exportToExcel = () => {
    const workbook = XLSX.utils.book_new();
    const worksheet = XLSX.utils.json_to_sheet(excelData);

    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet 1');

    const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });

    const s2ab = (s) => {
      const buf = new ArrayBuffer(s.length);
      const view = new Uint8Array(buf);
      for (let i = 0; i < s.length; i++) {
        view[i] = s.charCodeAt(i) & 0xff;
      }
      return buf;
    };

    const fileData = wbout;

    const blob = new Blob([s2ab(fileData)], { type: 'application/octet-stream' });

    const url = URL.createObjectURL(blob);

    const link = document.createElement('a');
    link.href = url;
    link.download = 'data.xlsx';

    link.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div>
      <input type="file" onChange={handleFileUpload} />
      {excelData && (
        <div>
          <button onClick={exportToExcel}>Export to Excel</button>
        </div>
      )}
    </div>
  );
}

export default ImportExportExcel;

希望这些示例能帮助你实现在 React 中导入和导出 Excel 文件的功能。记得在使用第三方库时，查看其官方文档以了解更多详细信息。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。

上一篇：web 前端怎么在 vue 中实现自定义组件传参

下一篇：Servlet 项目的 GET 请求怎么使用