介绍

SheetJS js-xlsx 是一款能够读写多种格式表格的插件，浏览器支持良好，并且能在多个语言平台上使用，目前在 github 上有 12602 个 star，

刚好项目中遇到了前端解析 excel 的需求，所以就尝试使用了一下，这里将使用方法和遇到的问题简单记录一下。

使用

1. 安装依赖

进入项目文件夹，安装 xlsx

npm install xlsx

2. 在项目中引入

import * as XLSX from 'xlsx';

3. 定义上传 input

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

accept 属性定义了上传文件支持的类型，onChange 操作中的 importExcel 方法定义了上传文件时执行的操作。

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

定义方法后在浏览器中报了如下错误：

Failed to compile
./node_modules/xlsx/dist/cpexcel.js
Module not found: Can't resolve './cptable' in '/Users/wangxi/Desktop/Code/admin/node_modules/xlsx/dist'

大意是说在 cpexcel.js 文件中找不到 ./captable 模块，于是在 github 上的 issue 中输入问题，发现问题还是挺普遍的，官方给出的解决方案如下：即在 webpack 配置文件中添加如下 external 配置：

externals: [
    {
        './cptable': 'var cptable',
        '../xlsx.js': 'var _XLSX'
    }
]

保存并重新编译，浏览器又抛出如下错误：

The externals config must be Plain Object or Function, but got [object Object]

"externals 配置项必须为纯对象或函数，但是却得到了对象形式的数组"，所以原因是 externals 的格式不对：

externals 配置支持三种形式，分别是 Array、Object 和 Reg，上述的配置项内容是一个对象，所以应该为用 Object 形式，所以只要把外面的中括号去掉就可以了：

externals: {
    './cptable': 'var cptable',
    '../xlsx.js': 'var _XLSX'
 }

更多关于 webpack externals 配置的学习，可以参考：【webpack externals 深入理解】

测试

运行代码，在浏览器中打开页面显示如下：点击 Choose File，在本地选择一个内容如下的 excel 文件：点击确定，上传后在浏览器控制台查看打印信息：可以发现，excel 已经读取成功并且转换成了 json 格式的数据，之后就可以对 json 数据进行分析和处理啦。

完善

使用原生 input 标签显示效果比较粗糙，因为对组件简单地进行了样式上的美化，效果如下：
针对文件上传和读取结果分别做了对应的提示（这里使用 ant design 中的 message 组件）

demo 完整代码如下：

// excel.js
import React, { Component } from 'react';
import { Button, Icon, message } from 'antd';
import * as XLSX from 'xlsx';
import styles from './index.less';

class Excel extends Component {
  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) {
          // esline-disable-next-line
          if (workbook.Sheets.hasOwnProperty(sheet)) {
            // 利用 sheet_to_json 方法将 excel 转成 json 数据
            data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
            // break; // 如果只取第一张表，就取消注释这行
          }
        }
        // 最终获取到并且格式化后的 json 数据
        message.success('上传成功！')
        console.log(data);
      } catch (e) {
        // 这里可以抛出文件类型错误不正确的相关提示
        message.error('文件类型不正确！');
      }
    };
    // 以二进制方式打开文件
    fileReader.readAsBinaryString(files[0]);
  }
  render() {
    return (
      <div style={{ marginTop: 100 }}>
        <Button className={styles['upload-wrap']}>
          <Icon type='upload' />
          <input className={styles['file-uploader']} type='file' accept='.xlsx, .xls' onChange={this.onImportExcel} />
          <span className={styles['upload-text']}>上传文件</span>
        </Button>
        <p className={styles['upload-tip']}>支持 .xlsx、.xls 格式的文件</p>
      </div >
    );
  }
}

export default Excel;

// index.less
.upload-wrap {
  display: inline-block;
  position: relative;
  width: 124px;
  padding: 3px 5px;
  overflow: hidden;
}

.file-uploader {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  outline: none;
  opacity: 0;
  background-color: transparent;
}

.upload-text {
  display: inline-block;
  margin-left: 5px;
}

.upload-tip {
  display: inline-block;
  margin-left: 10px;
  color: #999;
}

React读取Excel——js-xlsx 插件的使用

介绍

使用

1. 安装依赖

2. 在项目中引入

3. 定义上传 input

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

测试

完善