利用xlsx.js读取excel文件的详细过程

 更新时间:2025年04月02日 08:26:29   作者:这个昵称也不能用吗?  
如果你需要在浏览器端处理Excel文件,那么xlsx.js可能是一个不错的选择,这篇文章主要介绍了利用xlsx.js读取excel文件的详细过程,文中通过代码介绍的非常详细,需要的朋友可以参考下

需求:读取一个excel文件。

一、 使用antd的Upload组件的 【customRequest】方法。

互斥。此方法跟【onChange】方法互斥,即:不可同时出现。

调用次数不一样。onChange方法会根据文件当前的上传状态从而被调用多次(读取中,上传中,上传失败、上传完成等)。
customRequest方法是自定义读取和上传的文件,因此,onChange方法的几个状态,【customRequest】方法默认是没有的,因此【customRequest】方法只会被调用1次

参数不一样。onChange方法在读取完成后,会拿到一个数据。这个数据是 antd组件处理过后的数据,包含了一些读取状态等其他属性。(但是也无法直接看到文件里的内容)。
【customRequest】方法拿到的file数据是未经处理的,无法看到文件里的数据。

二. 如何读取文件?

  • readAsBinaryString 方法:按字节读取文件内容,结果为文件的二进制串。 这个结果,会作为参数 传递给 fileReader的 onload方法 (此方法会被逐渐废弃。不推荐使用。)
  • readAsArrayBuffer 方法:同上,结果为ArrayBuffer (推荐使用)

数据转化过程:

  • upload组件拿到的 原始的文件数据(customRequest的参数file)
  • 二进制流 or ArrayBuffer 。readAsBinaryString的方式读取后的数据为二进制流。readAsArrayBuffer读取出来的数据是ArrayBuffer
  • webhooks.里面是真个表的所有信息。
  • sheet。某个子表单的数据。里面是每个单元格的信息
  • sheet_to_json 方法将 sheet 转成 对象数组
import { read as xlsxRead, utils as xlsxUtils } from 'xlsx';
  
// 批量导入
  const customRequest = (files) => {
    const { file } = files;
        
    // step1 :创建一个 fileReader对象
    const fileReader = new FileReader();
    
    // step2: onload方法是 读完数据后 调用的方法。用来对读取后的数据进行一些处理
    fileReader.onload = (event: any) => {
      try {
        const { result } = event.target;
        console.log('event', event);
        // 1 以二进制流方式(buffer方式)读取得到整份excel表格对象,cellDates设为true,将读取到的天数的时间戳转为时间格式
        const workbook = xlsxRead(result, {
          type: 'binary',//🐷🐷🐷 如果readAsArrayBuffer方法读取文件则type:'buffer'🐷🐷
          cellDates: true,
        });
        console.log('workbook', workbook);
        // 2 遍历每张工作表进行读取(这里默认只读取第一张表)Sheets是个数组
        const { Sheets } = workbook;
        const sheet0 = Sheets[Object.keys(Sheets)[0]];
        console.log('sheet0', sheet0);
        // 4 利用 sheet_to_json 方法将 sheet 转成 对象数组
        const fileData =  xlsxUtils.sheet_to_json(sheet0)

        // convertToData(fileData);
      } catch (e) {
        // 这里可以抛出文件类型错误不正确的相关提示
        message.error(formatMessage({ id: 'create_order.fileError' }));
      }
    };
// step3: 使用 readAsBinaryString、或者 readAsArrayBuffer 来读取 文件。
    fileReader.readAsBinaryString(file);

  };

最后

二进制的数据流解析后。长什么样?

ArrayBuffer长什么样子?如下图。

到此这篇关于利用xlsx.js读取excel文件的文章就介绍到这了,更多相关xlsx.js读取excel文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • transport.js和jquery冲突问题的解决方法

    transport.js和jquery冲突问题的解决方法

    这篇文章主要介绍了transport.js和jquery冲突问题的解决方法,需要的朋友可以参考下
    2015-02-02
  • javascript如何定义对象数组

    javascript如何定义对象数组

    本文主要介绍javascript如何定义对象数组,两种方法,比较实用,希望能给大家做一个参考。
    2016-06-06
  • JS实现的DOM插入节点操作示例

    JS实现的DOM插入节点操作示例

    这篇文章主要介绍了JS实现的DOM插入节点操作,结合实例形式分析了javascript针对页面dom元素动态操作相关实现技巧,需要的朋友可以参考下
    2018-04-04
  • javascript 密码强弱度检测万能插件

    javascript 密码强弱度检测万能插件

    网上用的比较多的一种用来检测用户输入密码的强度检测,其实就是把一些常用的拼音,英文单词, 纯数字,纯字母等。
    2009-02-02
  • JSON生成Form表单的方法示例

    JSON生成Form表单的方法示例

    JSON表单是一个基于React的抽象组件,它可以把JSON数据格式描述的表单转换成项目中的表单,这篇文章主要介绍了JSON生成Form表单的方法示例,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • javascript如何计算数组中某值的出现次数

    javascript如何计算数组中某值的出现次数

    这篇文章主要介绍了javascript如何计算数组中某值的出现次数问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • JS如何让你的移动端交互体验更加优秀

    JS如何让你的移动端交互体验更加优秀

    现在在手机等移动端设备访问的人越来越多,我们前端开发者一直致力于将设计稿还原成页面,供用户访问。但除高度还原设计稿外,交互上的良好体验也是我们应该做到的。
    2021-05-05
  • JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例

    JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例

    这篇文章主要介绍了JS+CSS实现可拖拽的漂亮圆角特效弹出层,以完整实例形式分析了弹出层特效及圆角矩形的实现技巧,需要的朋友可以参考下
    2015-02-02
  • 微信小程序子组件向父组件传值的两种方法

    微信小程序子组件向父组件传值的两种方法

    本文介绍了微信小程序中子组件向父组件传值的两种方法,这两种方法都能有效地实现子组件向父组件的数据传递,对于开发微信小程序的开发者来说,掌握这些技巧非常重要,感兴趣的朋友跟随小编一起看看吧
    2024-09-09
  • JS在数组头部添加元素的3种方法

    JS在数组头部添加元素的3种方法

    JS数组是一种特殊的对象,JS没有真正的数组,只是用对象模拟数组,下面这篇文章主要给大家介绍了关于JS在数组头部添加元素的3种方法,需要的朋友可以参考下
    2023-10-10

最新评论