Vue项目实现导入导出Excel表格功能

前提:在我的项目中我使用的是ElementUi前端UI框架，用到的是里面的Upload上传组件。

第一步：需要安装三个依赖

npm install -S file-saver xlsx  （这里其实安装了2个依赖）

npm install -D script-loader

 

第二步：在main.js文件中全局导入挂载xlsx插件

//  导入excel插件

import XLSX from 'xlsx'

Vue.prototype.XLSX = XLSX

 

第三步：在src目录新建一个文件夹（名字随意），在这个文件夹里面放入2个JS文件分别是：Blob.js和Export2Excel.js，网上可百度下载。

 

第四步，需要的页面的template标签中开始写代码（我先写导入的代码）

<!-- 导入Excel -->
<el-upload
   action="/上传文件的接口"
   :on-change="onChange"
   :auto-upload="false"
   :show-file-list="false"
   accept=".xls, .xlsx" >
   <el-button type="warning" icon="el-icon-folder-add">批量导入</el-button>
</el-upload>

 

第五步：然后在  methods: {}中配置方法，代码如下：

// ----------以下为导入Excel数据功能--------------
    // 文件选择回调
    onChange(file, fileList) {
      console.log(fileList);
      this.fileData = file; // 保存当前选择文件
      this.readExcel(); // 调用读取数据的方法
    },
    // 读取数据
    readExcel(e) {
      console.log(e);
      let that = this;
      const files = that.fileData;
      console.log(files);
      if (!files) {
        //如果没有文件
        return false;
      } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }
      const fileReader = new FileReader();
      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          // console.log(data)
          const workbook = this.XLSX.read(data, {
            type: "binary"
          });
          console.log(workbook.SheetNames);
          if (workbook.SheetNames.length >= 1) {
            this.$message({
              message: "导入数据表格成功",
              showClose: true,
              type: "success"
            });
          }
          const wsname = workbook.SheetNames[0]; //取第一张表
          const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
          console.log(ws);
          that.outputs = []; //清空接收数据
          for (var i = 0; i < ws.length; i++) {
            var sheetData = {
              // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
              id: ws[i]["id"],
              stuNumber: ws[i]["学号"],
              stuName: ws[i]["姓名"],
              sex: ws[i]["性别"],
              tel: ws[i]["电话"],
              xueyuan: ws[i]["学院"],
              banji: ws[i]["班级"],
              lyNumber: ws[i]["楼宇号"],
              sushe: ws[i]["宿舍号"]
            };
            that.studentlist.unshift(sheetData);
          }
          this.$refs.upload.value = "";
        } catch (e) {
          return false;
        }
      };
      // 如果为原生 input 则应是 files[0]
      fileReader.readAsBinaryString(files.raw);
    },

 

此时导入的功能就结束了，下面开始实现导出的功能

第一步，在template标签中写入导出的按钮，并绑定单击事件，代码如下：

<el-button type="warning" icon="el-icon-download" @click="exportToExcel">批量导出</el-button>

第二步：在methods{}方法中写对应的方法

// ----------以下为导出Excel数据功能--------------
    exportToExcel() {
      //excel数据导出
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../excel/Export2Excel");
        const tHeader = [
          "id",
          "学号",
          "姓名",
          "性别",
          "联系电话",
          "宿舍号",
          "学院",
          "班级",
          "楼宇号"
        ];
        const filterVal = [
          "id",
          "stuNumber",
          "stuName",
          "sex",
          "tel",
          "sushe",
          "xueyuan",
          "banji",
          "lyNumber"
        ];
        const list = this.studentlist;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "学生列表excel");
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },

https://www.bilibili.com/video/BV1H7411N7Qq/?spm_id_from=333.788.videocard.0

https://github.com/liyaxu123/-Vue-ElementUi-NodeJS-Mysql-