vue中上传excel文件的方法

安装三个依赖

1. npm install -S file-saver xlsx
2. npm install -D script-loader

1.使用方法

  <input type="file" @change="importExcel">

或者使用element-ui

<el-upload ref="input" action="/" :show-file-list="false" :auto-upload="false" :on-change="importExcel" type="file">
      <el-button slot="trigger" icon="el-icon-upload" size="small" type="primary">上传文件</el-button>
</el-upload>

2.vue中data的定义

data() {
    return {
      contentData: [
        { id: 1, title: "读书" },
        { id: 2, title: "读书" },
        { id: 3, title: "读书" },
        { id: 4, title: "读书" },
      ],
    };
  },

3.导入文件的事件

 //导入
    importExcel(file, fileList) {
      // console.log(file);
      // console.log(fileList);
      // 获取上传excel文件的信息
      const fileContent = file.raw;
      // 获取文件类型
      const types = file.name.split(".")[1];
      const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt"].some(
        (item) => item === types
      );
      if (!fileContent) {
        if (!fileType) {
          alert("格式错误！请重新选择");
          return;
        }
      }
      this.importfile(fileContent);
    },
    // 文件数据的处理
    importfile(obj) {
      // console.log(obj)
      // 文件读取
      const reader = new FileReader();
      // console.log(reader)
      const _this = this;
      // 按字节读取文件内容，结果用ArrayBuffer对象表示
      reader.readAsArrayBuffer(obj);
      //  读取操作完成时触发的事件(reader.onload)
      reader.onload = function () {
        const buffer = reader.result;
        // console.log(reader.result)
        // Uint8Array 数组类型转化为16进制字符串
        const bytes = new Uint8Array(buffer);
        // console.log(bytes)
        const length = bytes.byteLength;
        let binary = "";
        for (let i = 0; i < length; i++) {
          // 转码
          binary += String.fromCharCode(bytes[i]);
        }
        const XLSX = require("xlsx");
        // 获取excel表格中的表头
        const wb = XLSX.read(binary, {
          type: "binary",
        });
        console.log(wb);

        // 获取excel表格数据
        // wb.SheetNames[0]:excel表格的第几个工作表格  wb.Sheets是获取工作表格数据
        // XLSX.utils.sheet_to_json 从工作表创建 JS 值数组的数组
        const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[1]]);
        // console.log(outdata);
        const data = [...outdata];
        // 定义转化完成的数据
        const arr = [];
        // 将每一项的数据进行转化
        data.map((v) => {
          const obj = {};
          //换成你的字段名称
          // obj.title: 字段名 ， v.名称：Excel中表单标题行名
          obj.id = v.序号;
          obj.title = v.名称;
          arr.push(obj);
        });
        // console.log(arr)
        //_this.contentData换成你要导入的table表 (将上传的数据直接拼接到已有的数据里进行展示)
        _this.contentData = _this.contentData.concat(arr);
      };
    },

 

__EOF__

本文作者：长安
本文链接：https://www.cnblogs.com/jingxin01/p/16708666.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！