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-