vue 插件 XLSX 的使用，将excel表格导入后转json传给后端

最新推荐文章于 2024-03-26 11:24:50 发布

阿泽Kze_

最新推荐文章于 2024-03-26 11:24:50 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript html5 vue.js

本文链接：https://blog.csdn.net/Wangyuan_wo/article/details/121424346

本文介绍如何利用XLSX插件在前端实现Excel文件(.xlsx, .xls)的读取与解析，包括安装XLSX插件、通过input元素选择文件并触发读取事件的具体实现。

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

准备工作
需要先安装 XLSX 插件

npm install xlsx --save

以下是代码：

    <input
      type="file"
      ref="fileTemp"
      accept=".xlsx,.xls"
      @change="getImportFile"
    />

    // 获取文件
    getImportFile() {
      if (this.$refs.fileTemp && !this.$refs.fileTemp.files[0]) return false;
      const selectedFile = this.$refs.fileTemp.files[0];
      this.readFile(selectedFile);
    },
    readFile(file) {
      let reader = new FileReader();
      reader.onload = function (e) {
        let wb = XLSX.read(e.target.result, { type: "binary" }); // 读取文件
        let wbSheetName = wb.SheetNames[0];
        const wbSheet = wb.Sheets[wbSheetName];
        // 解析文件 {defval: ''}=>防止单元格为空的时解析出来的结果缺少相应的key
        let selectFileData = XLSX.utils.sheet_to_json(wbSheet, { defval: "" });
        if (!selectFileData.length) {
          console.log(`上传的文件数据为空！`);
          return false;
        } else {
          console.log(selectFileData);
        }
      };
      reader.readAsBinaryString(file);
    },