js-xlsx读取数据并重命名列标题

1.安装依赖

npm install xlsx

2.在项目中引入

import * as XLSX from 'xlsx';

3.定义上传 input 

<input type='file' accept='.xlsx, .xls' onChange={this.onImportExcel} />

4. 定义获取和解析 excel 对象的方法

onImportExcel = file => {
    // 获取上传的文件对象
    const { files } = file.target;
    // 通过FileReader对象读取文件
    const fileReader = new FileReader();
    fileReader.onload = event => {
      try {
        const { result } = event.target;
        // 以二进制流方式读取得到整份excel表格对象
        const workbook = XLSX.read(result, { type: 'binary' });
        let data = []; // 存储获取到的数据
        // 遍历每张工作表进行读取（这里默认只读取第一张表）
        for (const sheet in workbook.Sheets) {
          if (workbook.Sheets.hasOwnProperty(sheet)) {
            // 利用 sheet_to_json 方法将 excel 转成 json 数据
            data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
            // break; // 如果只取第一张表，就取消注释这行
          }
        }
        console.log(data);
      } catch (e) {
        // 这里可以抛出文件类型错误不正确的相关提示
        console.log('文件类型不正确');
        return;
      }
    };
    // 以二进制方式打开文件
    fileReader.readAsBinaryString(files[0]);
  }

5.获取数据成功

到这里每一列的数据都已经被读取出来,但是发现列标题的key是根据表格的第一行命名并且自动忽略了第一行的内容

但是我并不想要key是中文的,而是需要英文的key以便我后续渲染页面使用,所以接下来就是重命名列标题.

6.重命名列标题

查阅了相关文档,发现XLSX.utils.sheet_to_json这个函数接受一个header参数：  

 从这个可以看出,第三个自然就是我们想要的结果,所以在刚刚的代码中修改:

data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet], { header: ['name','topic','description','d','e','f','g','h','i','j','k','l','m'] }));

 表格中有几列就对应几个名字,按顺序根据自己的需要来,并且以数组的形式.

7.重命名成功

不过在这里可以发现,它将我们表格中的第一行也合在数组中了,从上面的定义表格得出,只有没有header参数的时候才会忽略掉第一行,这个时候只要循环输出的时候避开数组中的第一个元素就可以了.

8.完整代码

onImportExcel = file => {
    // 获取上传的文件对象
    const { files } = file.target;
    // 通过FileReader对象读取文件
    const fileReader = new FileReader();
    fileReader.onload = event => {
      try {
        const { result } = event.target;
        // 以二进制流方式读取得到整份excel表格对象
        const workbook = XLSX.read(result, { type: 'binary' });
        let data = []; // 存储获取到的数据
        // 遍历每张工作表进行读取（这里默认只读取第一张表）
        for (const sheet in workbook.Sheets) {
          if (workbook.Sheets.hasOwnProperty(sheet)) {
            // 利用 sheet_to_json 方法将 excel 转成 json 数据
            data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet], { header: ['name','topic','description','d','e','f','g','h','i','j','k','l','m'] }));
            // break; // 如果只取第一张表，就取消注释这行
          }
        }
        console.log(data);
      } catch (e) {
        // 这里可以抛出文件类型错误不正确的相关提示
        console.log('文件类型不正确');
        return;
      }
    };
    // 以二进制方式打开文件
    fileReader.readAsBinaryString(files[0]);
  }

参考:React读取Excel——js-xlsx 插件的使用 - Raychan - 博客园