使用vue不走数据库实现导入excel

最新推荐文章于 2024-11-03 19:51:25 发布

沙皮狗你不懂

最新推荐文章于 2024-11-03 19:51:25 发布

阅读量486

点赞数

文章标签： vue.js excel 前端

本文链接：https://blog.csdn.net/rq12345688/article/details/128204041

版权

本文介绍如何使用Vue.js在不依赖数据库的情况下实现Excel文件的导入功能。通过前端读取Excel文件并将其转换为JSON对象，进而处理这些数据。文章详细展示了如何利用xlsx库解析Excel文件，并将内容转化为易于操作的数据格式。

摘要由CSDN通过智能技术生成

使用vue不走数据库实现导入excel

首先需要引入依赖xlsx

npm install xlsx

具体实现方法

/** 前端excel上传 */
    handleChange(file, fileList) {
      // 只能上传一个Excel，重复上传会覆盖之前的
      this.fileList = [fileList[fileList.length - 1]];
      this.file = file.raw;
      let reader = new FileReader();
      reader.readAsArrayBuffer(this.file);
      new Promise((resolve, reject) => {
        reader.onload = function () {
          let buffer = reader.result;
          let bytes = new Uint8Array(buffer);
          let length = bytes.byteLength;
          let binary = "";
          for (let i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          let XLSX = require("xlsx");
          let wb = XLSX.read(binary, {
            type: "binary",
          });
          let results = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
          // console.log("从当前excel文件中读出的内容是", results);
          if (results instanceof Array) {
            this.directionList = [];
            results.forEach((i) => {
              let obj = {
                projectName: i.名称,
                technicalField: i.手机号.toString(),
                content: i.内容,
              };
              this.directionList.push(obj);
            });
            // console.log("转换后是", this.directionList);
          }
          resolve(reader.directionList);
        };
      }).then((res) => {
        this.$nextTick(() => {
          res.forEach(item=>{
            this.directionDelDtoList = [...this.directionDelDtoList,item]
          })
        });
      });
    },