Vue2.x + element ui 导入导出excel

实现内容：

• 导入excel文件最终将其展现在页面table中
• 将页面table中的表格转换为excel文件

仓库地址：

完整代码在这里：https://github.com/Nigo-yyy/vue-excel

依赖安装：

需要安装三个依赖包， 和两个JS包

npm包：

分别安装 file-saver、 xlsx、 script-loader三个依赖

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

npm install -D script-loader

JS文件

src文件夹下新建 excel文件夹，放入以下两个文件：

Blob.js

expor2Excel.js

这两个文件可以在仓库中找到

至此，我们的准备工作就做完了，开始编写代码

template部分

<div class="home">
    <div class="control_wrap">
      <el-upload
        class="upload-demo"
        action=""
        :on-change="handleChange"
        :on-remove="handleRemove"
        :file-list="fileListUpload"
        limit="1"
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
        :auto-upload="false"
      >
        <el-tooltip content="只能上传xls/xlsx 文件" placement="top-start">
          <el-button style="margin-right: 20px" type="primary"
            >点击上传</el-button
          >
        </el-tooltip>
      </el-upload>
      <el-button type="warning" @click="getExcel(excelData)"
        >导出为excel</el-button
      >
    </div>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <el-table
      v-if="excelData && excelData.length"
      :data="excelData"
      style="width: 95%; margin: 20px auto"
      border
    >
      <el-table-column
        v-for="(item, index) of colData"
        :key="index"
        :label="item.label"
      >
        <template slot-scope="scope">
          <span>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>

在el-upload 的 cahnge事件中 判断如果传入文件，且文件类型正确， 就调用我们的导入函数，将传入的文件转换为 供el-table使用的数组。

handleChange函数

handleChange(file) {
  		//file.raw就是我们的导入函数需要的参数
      this.fileTemp = file.raw;
      if (this.fileTemp) {
        if (
          this.fileTemp.type ==
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
          this.fileTemp.type == "application/vnd.ms-excel"
        ) {
          this.importfxx(this.fileTemp);
        } else {
          this.$message({
            type: "warning",
            message: "附件格式错误，请重新上传！",
          });
          this.handleRemove();
        }
      } else {
        this.$message({
          type: "warning",
          message: "请上传附件！",
        });
      }
    },

导入函数

importfxx(obj) {
      // 通过DOM取文件数据
      var rABS = false; //是否将文件读取为二进制字符串
      var f = obj;
      var reader = new FileReader();
      const self = this;
      FileReader.prototype.readAsBinaryString = function (f) {
        var binary = "";
        // var pt = this;
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        reader.onload = function (e) {
          console.log(e);
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          var XLSX = require("xlsx");
          wb = XLSX.read(binary, {
            type: "binary",
          });
           //outdata就是需要的那个数组
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
          self.excelData = [...outdata];
        };
        reader.readAsArrayBuffer(f);
      };
      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
    },

到这里，我们就可以拿到table需要的数组(每一行的数组)，长这个样子：

定义colData，由colData去遍历产生对应的列

colData:

export const colData = [
  {
    prop:'Author',
    label:'作者'
  },
  {
    prop:'Date',
    label:'时间'
  },
  {
    prop:'Id',
    label:'序号'
  },
  {
    prop:'Readings',
    label:'阅读量'
  },
  {
    prop:'Title',
    label:'名称'
  }
]

到这里，我们就完成了，导入excel并将其显示在table中的任务。

导出excel

expor2Excel添加代码

//由于这几个文件不支持import引入，所以我们需要`script-loader`来将他们挂载到全局环境下
require('script-loader!file-saver');  //保存文件用
require('script-loader!./Blob');   //保存二进制文件用，直接写绝对路径
require('script-loader!xlsx/dist/xlsx.core.min');  //xlsx核心

导出函数

getExcel(arrData) {
      if (!arrData || !arrData.length) return;
      const self = this;
      require.ensure([], () => {
        //导入expor2Excel， 写绝对路径
        const { export_json_to_excel } = require("../excel/expor2Excal");
        const filterVal = self.colData.map((item) => item.prop);
        const tHeader = self.colData.map((item) => item.label);
        const json = self.excelData;
        const data = this.formatJson(filterVal, json);
        // console.log(data, "data");
        export_json_to_excel(tHeader, data, "excel表名");
      });
    },
      //保持输出顺序与表头一致
     formatJson(filterVal, jsonData) {
      return jsonData.map( v => filterVal.map( j => v[j]));
    },

好了，到此，我们的事情就做完了