vue3 前端表格导入并处理,fileReader.onload 方法null 的坑

fileReader.onload 方法null 修改为

fileReader.onloadend

完整代码。

<el-upload ref="upload" action="/" :http-request="httpRequest" :limit="1" accept=".xls" :show-file-list="false">
 <template #trigger>
   <el-button type="primary">结果导入</el-button>
 </template>
</el-upload>

import * as XLSX from "xlsx";

const httpRequest = (e: any) => {
  state.saveVisible = false;
  state.ffResult = []; // 上传前清空
  const file = e.file; // 文件信息
  if (!file) {
    // 没有文件
    return false;
  } else if (!/\.(xls)$/.test(file.name.toLowerCase())) {
    // 格式根据自己需求定义
    ElMessage.error("上传格式不正确,请上传xls格式");
    return false;
  }
  const fileReader = new FileReader();
  fileReader.readAsBinaryString(file)
  fileReader.onloadend = ev => {
    console.log("ev", ev);
    try {
      const data = ev.target.result;
      const workbook = XLSX.read(data, {
        type: "binary", // 以字符编码的方式解析
        cellDates: true
      });
      const exlname = workbook.SheetNames[0]; // 取第一张表
      const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]); // 生成json表格内容
      // // const csv = XLSX.utils.sheet_to_csv(workbook.Sheets[exlname])
      // // let splitDate = data.split(/\s+/) ;

      // //表格数据更处理
      let arr = [];
      for (let i = 0; i < exl.length; i++) {
        let obj = {};
        obj.tm = setTm(exl[i].tm);
        obj.value = exl[i].value.toFixed(2);
        arr.push(obj);
      }
      state.ffResult = arr;
    } catch (e) {
      console.log("出错了:");
      state.saveVisible = false;
      return false;
    }
  };
  fileReader.readAsBinaryString(file);
};
Vue导入和解析Excel表格可以使用xlsx这个包来实现。这个包提供了强大的功能,包括导入、数据解析和导出为Excel等功能。在Vue中,我们可以通过以下步骤来实现导入和解析Excel表格: 1. 首先,安装xlsx包。可以使用npm或yarn命令来安装,例如:npm install xlsx。 2. 在Vue组件中引入xlsx包。可以使用import语句来引入,例如:import XLSX from 'xlsx'。 3. 创建一个文件选择的input元素,用于选择要导入的Excel文件。可以使用input元素的change事件来监听文件选择的变化。 4. 在change事件的处理函数中,获取选择的文件对象。可以使用event.target.files来获取选择的文件。 5. 使用FileReader对象读取文件内容。可以使用FileReader的readAsBinaryString方法来读取文件内容。 6. 在FileReaderonload事件中,获取读取的文件内容。可以使用event.target.result来获取读取的文件内容。 7. 使用XLSX的方法来解析Excel文件内容。可以使用XLSX的utils.sheet_to_json方法将Excel表格转换为JSON格式的数据。 8. 将解析得到的数据用于后续的处理或展示。 需要注意的是,在使用xlsx包时,可能会遇到一些。例如,导入xlsx包的方式需要注意,可以使用import语句来引入。此外,在Vue处理事件的方式也需要注意,使用组件和不使用组件的方式可能会有一些区别。建议大家使用现有的组件来实现这个功能,以获得更好的效果。 总结起来,Vue导入和解析Excel表格可以通过安装xlsx包,并使用其提供的方法来实现。在处理过程中需要注意导入方式和事件处理方式。 #### 引用[.reference_title] - *1* *2* [vue导入处理Excel表格详解](https://blog.csdn.net/m0_46309087/article/details/125022676)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值