React实现excel导入功能(xlsx包)

1.安装xlsx依赖包

npm install xlsjs

2.导入依赖包

import * as XLSX from 'xlsx'

3.导入excel表格

// 读取本地excel文件
function readWorkbookFromLocalFile(file, callback) {
	var reader = new FileReader();
	reader.onload = function(e) {
        var data = e.target.result;
        // 读取二进制的excel
		var workbook = XLSX.read(data, {type: 'binary'});
		if(callback) callback(workbook);
	};
	// 将文件读取为二进制字符串
	reader.readAsBinaryString(file);
}
// 读取远程文件
function readWorkbookFromRemoteFile(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function (e) {
        if (xhr.status == 200) {
            var data = new Uint8Array(xhr.response)
            var workbook = XLSX.read(data, { type: 'array' });
            if (callback) callback(workbook);
        }
    };
    xhr.send();
}

第二种方法


/**
 * xlsx 方式导入
 * @param e 所选文件
 * @param headerMap [key => value| 中文 => pojo属性]
 * @param handleResCallback 处理结果集[验证数据合法性]
 * @param errorCallback 处理异常
 */
function importExcel(e, headerMap, handleResCallback, errorCallback){
  const { files } = e.target;
  if (!files) return;
  const file = files[0];
  const fileReader = new FileReader();
  fileReader.readAsBinaryString(file);
  fileReader.onload = event => {
    try {
      const { result } = event.target;
      const wb = XLSX.read(result, { type: 'binary' });
      let res = [];
      for (const sheet in wb.Sheets) {
        if (wb.Sheets.hasOwnProperty(sheet)) {
          const data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
          data.forEach(function (item, index) {
            for (let key in item) {
              if (headerMap.has(key)) {
                let columnName = headerMap.get(key);
                data[index][columnName] = data[index][key];
                delete data[index][key];
              }
            }
          });
          res = res.concat(data);
        }
      }
      handleResCallback(res);
    } catch (e) {
      console.log('文件类型不正确');
      errorCallback();
    }
  };
}

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值