VUE ElementUI 导出导入 excel 表格

1. 步骤一 npm install --save xlsx file-saver 安装依赖

2. 需要导出的页面 引入依赖

import XLSX from "xlsx";
import FileSaver from "file-saver";

3. 写入对应事件

导出

 // 导出事件
    exportExcel() {
      //  .table捕获excel的表格
      let wb = XLSX.utils.table_to_book(document.querySelector(".table"));
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      let name = '想要导出的表格名字'
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          name + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    }

导入

<template>
  <div>
    <input type="file" ref="upload" accept=".xls, .xlsx" class="outputlist_upload" />
  </div>
</template>
<script>
import XLSX from 'xlsx'
export default {
  data() {
    return {
      outputs: []
    };
  },
  mounted() {
    this.$refs.upload.addEventListener("change", e => {
      //绑定监听表格导入事件
      this.readExcel(e);
    });
  },
  methods: {
    readExcel(e) {
      //表格导入
      var that = this;
      const files = e.target.files;
      console.log(files);
      if (files.length <= 0) {
        //如果没有文件名
        return false;
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$Message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }

      const fileReader = new FileReader();
      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary"
          });
          const wsname = workbook.SheetNames[0]; //取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
          console.log(ws,111111111);
          that.outputs = []; //清空接收数据
          //编辑数据
          for (var i = 0; i < ws.length; i++) {
            var sheetData = {
              address: ws[i].addr,
              value: ws[i].value
            };
            that.outputs.push(sheetData);
            
          }
          this.$refs.upload.value = "";
        } catch (e) {
          return false;
        }
      };
      fileReader.readAsBinaryString(files[0]);
    }
  }
};
</script>
<style lang="stylus" scoped></style>