vue excel 数据导入导出 总结

安装依赖：
npm install -S file-saver
npm install -D script-loader
npm install xlsx
npm i element-ui -S（这里导出的时候会用到）

**

场景一（导入excel）

**
直接上代码（excel一定不能是加密文件**，否则读取出来的是乱码**）

<template>
  <div>
    <input
      type="file"
      @change="importf(this)"
      accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
    />
  </div>
</template>
<script>
import XLSX from "xlsx"; // npm导入库，命令：npm i xlsx@^0.14.1 -s

export default {
  data() {
    return {
      accountList: []
    };
  },
  methods: {
    importf(obj) {
      let _this = this;

      let inputDOM = this.$refs.inputer; // 通过DOM取文件数据
      this.file = event.currentTarget.files[0];
      var rABS = false; //是否将文件读取为二进制字符串
      var f = this.file;

      var reader = new FileReader(); //if (!FileReader.prototype.readAsBinaryString) {

      FileReader.prototype.readAsBinaryString = function(f) {
        var binary = "";

        var rABS = false; //是否将文件读取为二进制字符串

        var pt = this;

        var wb; //读取完成的数据

        var outdata;

        var reader = new FileReader();

        reader.onload = function(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");
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              //手动转化

              type: "base64"
            });
          } else {
            wb = XLSX.read(binary, {
              type: "binary"
            });
          } // outdata就是你想要的东西 excel导入的数据

          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
          // excel 数据再处理
          let arr = [];

          outdata.map(v => {
            let obj = {};
            obj.name = v["姓名"];//姓名对应的表头名称

            obj.phone = v["手机号"];

            arr.push(obj);
          });

          _this.accountList = [...arr];
          _this.$emit('sendLists',_this.accountList);//此处需要给父组件传值，看需求写
          console.log(_this.accountList)

          //          _this.reload();
        };

        reader.readAsArrayBuffer(f);
      };

      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
    }
  }
};
</script>
<style scoped>
.in-file,
.cont h2 {
  text-align: center;
}
</style>

场景二（table导出excel）

前提条件：
main.js写入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

如图所示：

在/src目录下新建一个vendor（名字也可自取）文件夹，存入Export2Zip.js和Export2Excel.js文件。
下载地址：
https://github.com/penpeng617/excel
目录结构如图所示：

新建下载的组件
组件代码

<template>
  <div>
    <div class='downExcel'>
        <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-download"
        @click="handleDownload"
      >下载excel</el-button>
    </div>
    <!-- sortable是否排序 -->
    <el-table id="excel-table" ref="filterTable" :data="tableList" style="width: 100%">
      <el-table-column prop="name" label="姓名"  width="180"></el-table-column>
      <el-table-column prop="phone" label="手机号"  width="180" column-key="date"></el-table-column>
      <el-table-column prop="id" label="中奖等次" sortable width="180"></el-table-column>
      <el-table-column prop="prizename" label="奖项名称" width="180"></el-table-column>
      <el-table-column prop="prize" label="礼品"></el-table-column>
      <el-table-column prop="tag" label="是否已领取" width="100" filter-placement="bottom-end"></el-table-column>
    </el-table>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableList: [
        {
        name: "张三",
        phone: "14696458722",
        id: 2,
        prizename: "二等奖",
        prize: "耳机一个",
        tag: "未领取",
      },{
        name: "杜军",
        phone: "13599994444",
        id: 2,
        prizename: "二等奖",
        prize: "手机一个",
        tag: "已领取",
      },{
        name: "李四",
        phone: "15877774512",
        id: 2,
        prizename: "二等奖",
        index: 1,
        prize: "耳机一个",
        tag: "未领取",
      },
      ]
    };
  },
  methods: {
    handleDownload() {
      // this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = ["姓名", "手机号",  "奖项名称", "礼品", "是否已领取"]; //要导出后表头是什么，可以跟tableDate中的表头不一致
        const filterVal = ["name", "phone",  "prizename",  "prize", "tag"];
        const data = this.formatJson(filterVal, this.tableList);

        // const data = this.tableList;
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "lottery-winner" //导出文件的名，自定义就好
        });
        // this.downloadLoading = false;
      });
    },
    //下载方法中，需要用到的格式化json的方法
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "id") {
            //此处如没有要格式化的列，可以不用此判断
            // return parseTime(v[j])
            return v[j];
          } else {
            return v[j];
          }
        })
      );
    }
  }
};
</script>
<style scoped>
.downExcel{text-align:right;background:#fff}
</style>