使用 React 读取和保存 Excel

在 Web 开发中，经常需要处理 Excel 文件。本文将介绍如何使用 React.js 和一些其他 JavaScript 库来读取和保存 Excel 文件。

读取 Excel

要使用 React.js 读取 Excel，我们需要使用两个 JavaScript 库：

• SheetJS
• XLSX

首先，我们需要在 React.js 项目中安装这两个库：

npm install sheetjs xlsx

接下来，在我们的 React 组件中，我们可以使用以下代码来读取 Excel：

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

class ExcelReader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      cols: []
    };
    this.handleFile = this.handleFile.bind(this);
  }

  handleFile(file) {
    const reader = new FileReader();
    const rABS = !!reader.readAsBinaryString;

    reader.onload = (e) => {
      const wb = XLSX.read(e.target.result, { type: rABS ? 'binary' : 'array' });

      const wsname = wb.SheetNames[0];
      const ws = wb.Sheets[wsname];

      const data = XLSX.utils.sheet_to_json(ws);
      const cols = this.makeCols(ws['!ref']);

      this.setState({ data, cols });
    };

    if (rABS) {
      reader.readAsBinaryString(file);
    } else {
      reader.readAsArrayBuffer(file);
    }
  }

  makeCols(refstr) {
    const match = refstr.match(/([A-Z]+)\d+:[A-Z]+\d+/);
    if (!match) {
      return [];
    }
    const endCol = match[1];
    const cols = [];
    for (let i = 65; i <= endCol.charCodeAt(0); i++) {
      cols.push({ name: String.fromCharCode(i) });
    }
    return cols;
  }

  render() {
    return (
      <div>
        <input type="file" onChange={(e) => this.handleFile(e.target.files[0])} />
        <pre>{JSON.stringify(this.state.data, null, 2)}</pre>
      </div>
    );
  }
}

export default ExcelReader;

这个组件包含一个 handleFile() 方法，该方法会读取由 <input type="file" /> 提供的文件并使用 XLSX 库将其转换为 JSON 格式。由于 Excel 文件可能非常大，所以这个方法使用了 FileReader 对象的 readAsBinaryString() 或 readAsArrayBuffer() 方法，在处理不同类型的文件时使用不同的方法。最终，我们将得到一个文件的 JSON 数据表示，并使用 React 显示它。

保存 Excel

如果我们需要保存 Excel 文件，我们需要使用一个名为 FileSaver.js 的 JavaScript 库。我们可以在 React.js 项目中使用以下命令安装该库：

npm install file-saver

现在，我们可以更新 ExcelReader 组件，以使它能够保存 Excel 文件：

import React from 'react';
import XLSX from 'xlsx';
import { saveAs } from 'file-saver';

class ExcelReader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      cols: []
    };
    this.handleFile = this.handleFile.bind(this);
    this.handleDownload = this.handleDownload.bind(this);
  }

  handleFile(file) {
    const reader = new FileReader();
    const rABS = !!reader.readAsBinaryString;

    reader.onload = (e) => {
      const wb = XLSX.read(e.target.result, { type: rABS ? 'binary' : 'array' });

      const wsname = wb.SheetNames[0];
      const ws = wb.Sheets[wsname];

      const data = XLSX.utils.sheet_to_json(ws);
      const cols = this.makeCols(ws['!ref']);

      this.setState({ data, cols });
    };

    if (rABS) {
      reader.readAsBinaryString(file);
    } else {
      reader.readAsArrayBuffer(file);
    }
  }

  makeCols(refstr) {
    const match = refstr.match(/([A-Z]+)\d+:[A-Z]+\d+/);
    if (!match) {
      return [];
    }
    const endCol = match[1];
    const cols = [];
    for (let i = 65; i <= endCol.charCodeAt(0); i++) {
      cols.push({ name: String.fromCharCode(i) });
    }
    return cols;
  }

  handleDownload() {
    const wb = XLSX.utils.book_new();
    const ws = XLSX.utils.json_to_sheet(this.state.data);
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    const wbout = XLSX.write(wb, { type: 'binary' });
    saveAs(new Blob([this.s2ab(wbout)], { type: 'application/octet-stream' }), 'data.xlsx');
  }

  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;
  }

  render() {
    return (
      <div>
        <input type="file" onChange={(e) => this.handleFile(e.target.files[0])} />
        <pre>{JSON.stringify(this.state.data, null, 2)}</pre>
        <button onClick={this.handleDownload}>Download Excel</button>
      </div>
    );
  }
}

export default ExcelReader;

我们通过在组件中添加一个名为 handleDownload() 的方法来实现保存 Excel 文件的功能。这个方法使用 XLSX 库将我们的 JSON 数据转换为工作簿和工作表，并使用 FileSaver.js 库将其保存到文件中。

结论

使用 SheetJS、XLSX 和 FileSaver.js 库，我们可以在 React.js 应用程序中轻松读取和保存 Excel 文件。这些库提供了强大的功能，使我们能够有效地处理复杂的电子表格数据。