首页 > 其他分享 >js使用xlsx读取excel文件

js使用xlsx读取excel文件

时间:2024-04-26 13:59:41浏览次数:10  
标签:xlsx const 读取 excel js workbook sheet data

官方案例:https://oss.sheetjs.com/sheetjs/

参考:https://www.jb51.net/javascript/293098ilx.htm

大致的代码如下,如果要实际使用还得修改修改完善完善。

<input type="file" id="uploadExcel" multiple onChange=’onImportExcel' />

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

 

标签:xlsx,const,读取,excel,js,workbook,sheet,data
From: https://www.cnblogs.com/huaan011/p/18159866

相关文章

  • 《Vue.js设计与实现》 第八章 挂载与更新
    8.1挂载子节点和元素的属性8.2HTMLAttributes与DOMProperties8.3正确地设置元素属性8.4class的处理8.5卸载操作8.6区分vnode的类型8.7事件的处理8.8事件冒泡与更新时机问题8.9更新子节点8.10文本节点和注释节点8.11Fragment......
  • js的函数及无参与有参构造函数
    1.函数定义fuctionfn(str){//1.定义函数alert(str);}fn("测试方法");varfn1=function(str){//2.定义函数alert(str);}varfn2=fuction(f,str){f(str);}fn2(fn1,"方法作为参数");//函数可以作为方法传递参数2.无参构造:varperson=function(){alert("......
  • golang之json.RawMessage
    RawMessage具体来讲是json库中定义的一个类型。它实现了Marshaler接口以及Unmarshaler接口,以此来支持序列化的能力。注意上面我们引用 官方doc 的说明。 使用场景设想一下,我们给某种业务场景定义了一个通用的model,其中部分数据需要在不同场景下对应不同的结构体......
  • js 闭包的概念及应用场景
    1.概念是内部函数可以访问外部函数作用域中的变量。2.来由由于JavaScript中的函数作用域规则和函数可以作为值传递的特性产生的3.优点封装性(可以将变量和函数封装起来,防止外部访问和修改,提高了代码的可维护性和可重用性)保存状态(即使函数已经执行完毕,状态仍然保存,在事件处理......
  • Chartist.js折线图(三)
    事件替换图形代码如下<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="./chartist.min.css"><scriptsrc="./chartist.min.js"></script></head><body><div......
  • Chartist.js折线图(二)
    折线散点图代码如下<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="./chartist.min.css"><scriptsrc="./chartist.min.js"></script></head><body><divc......
  • Chartist.js折线图
    数据漏洞代码案例<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="./chartist.min.css"><scriptsrc="./chartist.min.js"></script></head><body><divcl......
  • Js链式调用面试题
    Js链式调用需求:要求可以链式调用对象的方法,该对象有四个方法,加减乘除,一个get结果方法eg:counter.add(3).sub(1).get()//2方法一通过Es6实现classCounter{privateresult=0;add(val:number){this.result+=val;returnthis;}sub(val:nu......
  • vue3+vite+js 引用public文件夹中js文件
    vue的public的资源在打包时不会被编译,只会copy所以在在src路径下引入public文件夹下的图片、视频、音频,编译不会改变其路径,但是在src下引入public文件夹下的js、json,在打包时都会被编译,所以直接引入会丢失路径(因为打包时,当前页面引入的路径被hash打包,而public文件夹下只是被cop......
  • js逆向实战之喜马拉雅Xm-Sign参数解密
    url:https://www.ximalaya.com/channel/11/分析过程抓包,关注有页面数据回显的数据包。该url的请求头中有个加密的参数,找到该参数的加密过程。由于该参数名比较不常见,可以直接全局搜索这个参数名。只有一处,打断点。切换页码,触发断点。非常直接,xm-sign是由d.getS......