（亲测有效）vue + Element UI 实现Excel导入

1、在vue中使用导入导出，需要下载3个依赖包和2个js包：

使用npm安装：

npm install -S file-saver xlsx
npm install -D script-loader
npm install xlsx

使用yarn安装：

yarn add file-saver
yarn add xlsx
yarn add script-loader --dev

2.在src目录下新建一个excel文件夹引入Blob.js和expor2Excal.js

这是获取这两个文件的百度网盘网址

https://pan.baidu.com/s/1eoNlmvFy0b5zq04U56cu6Q 提取码：l0us

3.在main.js中全局引用

import XLSX from 'xlsx'
Vue.use(XLSX)

4. 页面数据导出

4.1 在方法中加入这两个方法

export2Excel() {
　　　　　　require.ensure([], () => {
　　　　　　　　const { export_json_to_excel } = require('../../vendor/Export2Excel');// 这里 require 写你的Export2Excel.js的绝对地址
　　　　　　　　const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名']; //对应表格输出的title
　　　　　　　　const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name']; // 对应表格输出的数据
　　　　　　　　const list = this.tableData;
　　　　　　　　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]))
　　　　}

4.2 按钮导出调用export2Excel方法

<el-button type="primary" size="small" @click="export2Excel()">导出</el-button>

5. 数据导入

5.1 data中加入一个 outdata 数组

5.2 在methods中加入这个方法

importfxx (obj) {
  let _this = this
  // eslint-disable-next-line no-unused-vars
  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 // 是否将文件读取为二进制字符串

    // eslint-disable-next-line no-unused-vars
    var pt = this

    var wb // 读取完成的数据

    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) {
        // eslint-disable-next-line no-undef
        wb = XLSX.read(btoa(fixdata(binary)), { // 手动转化

          type: 'base64'

        })
      } else {
        wb = XLSX.read(binary, {

          type: 'binary'

        })
      }

      _this.outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])// outdata 数组里面  这里面就是你想要的数据

      console.log(_this.outdata)

      _this.$message({

        message: '请耐心等待导入成功',

        type: 'success'

      })
    }

    reader.readAsArrayBuffer(f)
  }

  if (rABS) {
    reader.readAsArrayBuffer(f)
  } else {
    reader.readAsBinaryString(f)
  }
},

5.3 在页面上加入这个 a 标签

<a href="javascript:;" class="file">
<input id="upload" type="file" @change="importfxx(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
</a>