前端读取excel文件

最新推荐文章于 2021-11-26 17:36:28 发布

weixin_34075551

最新推荐文章于 2021-11-26 17:36:28 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5b5158526fb9a04f8b785b8a

本文介绍如何利用HTML5的FileReader对象读取文件，并通过js-xlsx库解析Excel文件内容。具体步骤包括读取文件为二进制字符串、解析Excel文件及获取表格数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由html5的FileReader这个对象来完成

FileReader接口的方法：

readAsBinaryString               file             将文件读取为二进制编码
readAsText                      file,[encoding]   将文件读取为文本，其中第二个参数是文本的编码方式，默认值为 UTF-8
readAsDataURL                    file             将文件读取为DataURL
abort                            (none)           中断读取操作(无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中)
复制代码

相关事件：

onabort                               中断
onerror                               出错
onloadstart                     &emsp;  开始
onprogress                          正在读取
onload                                成功读取
onloadend                           读取完成，无论成功失败
复制代码

核心代码：

    var reader = new FileReader(); //读取操作就是由它完成.
      reader.readAsBinaryString(file);//读取文件的内容,也可以读取文件的URL
      reader.onload = function (evt) {
               //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
               var data = evt.target.result,
      }
复制代码

在上传文件之前，我们拿到文件内容，使用js-xlsx,来读取文件内容 npm install js-xlsx 在文件中，

var XLSX = require('xlsx');

var workbook = XLSX.read(data, {
                    type: 'binary'
                }), // 以二进制流方式读取得到整份excel表格对象
复制代码

在reader.onload函数中

    reader.onload = function (evt) {
      //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
      try {
        var data = evt.target.result,
            workbook = XLSX.read(data, {
                type: 'binary'
            }), // 以二进制流方式读取得到整份excel表格对象
            buildings = []; // 存储获取到的数据
            var fromTo = '';
           // 遍历每张表读取
            for (var sheet in workbook.Sheets) {
                if (workbook.Sheets.hasOwnProperty(sheet)) {
                    fromTo = workbook.Sheets[sheet]['!ref'];
                    buildings = buildings.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    // break; // 如果只取第一张sheet表，就取消注释这行
                }
            }
            let fileRows = buildings.length - 1;//表格内容行数，减去表头的一行
           
    } catch (e) {
        console.log('文件类型不正确',e);
        return;
    }
  }
复制代码

代码中workbook对象可以获取到文件的详细信息