解决vue使用xlsx不能读取未编辑的Excel表格数据

前言

最近写项目需要读取Excel表格数据，用到了xlsx，很好获取，一开始我也没注意（一直用的就是已经编辑过的表格）这个一下子就获取到了数据，然后就开始处理数据，最后部署完毕，我在其他电脑上试了一下，才发现不能读取未编辑的表格数据，当时给急死了，明天就要交项目，后来解决了这个问题，记录一下，解决方式如下：

一、给项目添加xlsx库

npm install xlsx --save

引入

import * as XLSX from "xlsx";

二、代码部分

 <input
        class="inpOne"
        type="file"
        @change="handleChange($event.target.files[0])"
        id="selectedFile"
 />

js部分

 handleChange(file) {
      const reader = new FileReader();
      reader.onload = () => {
        const workbook = XLSX.read(reader.result, { type: "binary" });
        const sheet = workbook.Sheets[workbook.SheetNames[0]];
        sheet["!ref"] = "A1:Z5000"; //此处就是一下读取表格中5000行数据，要是数据过大在此更改
        const data = XLSX.utils.sheet_to_json(sheet, { header: 1, defval: "" });
        // console.log(data, "表一elx表格数据"); //此处已经拿到处理过后的数据data，任由开发者使用
        // 例如把提取的数据以对象的形式导入到数组中，供table使用
        this.tableData = data.map(item => {
          return { name: item[0], shenfen: item[1], wages: item[2], };
        });
       // let newArray = this.tableData.filter(item => item.name != '' && item.wages != '' && item.shenfen != " ");  
         //此处是过滤表掉那些为空的数据，因为这种方式是一下子读取5000列数据，把所有数据都读取出来了，自然你的表格不到5000行拿到的数据也是5000行，所以要对数据做一下处理，才能拿到我们需要的数据
         // console.log(newArray, "newArray"); 
      };
      if (file instanceof File) {
        reader.readAsBinaryString(file);
      } else if (file instanceof Blob) {
        reader.readAsBinaryString(new File([file], file.name));
      }
    },

以上就是解决vue使用xlsx不能读取未编辑的Excel表格数据的方法

声明：在刚开始用的xlsx的时候借鉴的是前端教父的博客，所以也是也是在他的博客上做的修改，原文出处如下
前端教父原文博客点击进行跳转