vue + element excel表格导出/上传预览_element el-table导入excel数据预览

1.导出

a)  在项目中安装插件

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

b)

把这个文件放在下图所示位置

再放一个百度云的链接

链接：https://pan.baidu.com/s/1Dn2ps9pSypBHj2wnTCkifQ 
提取码：csdn

接下来：直接贴源码

<template>
  <div>
    <el-button :loading="downloadLoading" :size=size :type=type @click="exportBtn()">{{btn_text}}</el-button>
  </div>
</template>
<script>
export default {
  name:'exportBtn',
  props:{
    size:String,  // 按钮尺寸
    type:String,  // 按钮类型
    bookType:String,  // 导出类型
    btn_text:String,  // 按钮文字
    list:Array,  // 导出的数据（后端给你的数组）
    fileName:String,  // 导出的文件名字
    tHeader:Array,  // 需要导出的数据table内的中文
    filterVal:Array  // 需要导出的数据中文对应的key名
  },
  data() {
    return {
      autoWidth: true,
      downloadLoading: false
    }
  },
  created() {
  },
  methods: {
    exportBtn(){
      if (this.list.length == 0) {
        this.$message({
          type:'warning',
          message:'您选中的表格并没有数据哦！',
          duration:2000
        })
        return false
      }
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = this.tHeader
        const filterVal = this.filterVal
        const list = this.list
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.fileName,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return this.parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    parseTime(time, cFormat) {
      if (arguments.length === 0 || !time) {
        return null
      }
      const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        if ((typeof time === 'string')) {
          if ((/^[0-9]+$/.test(time))) {
            // support "1548221490638"
            time = parseInt(time)
          } else {
            // support safari
            // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
            time = time.replace(new RegExp(/-/gm), '/')
          }
        }
 
        if ((typeof time === 'number') && (time.toString().length === 10)) {
          time = time * 1000
        }
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
        const value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
        return value.toString().padStart(2, '0')
      })
      return time_str
    }
  },
}
</script>

2.上传预览

上传预览需要的是element中的上传按钮

直接贴源码

<template>
  <div>
    <el-upload class="upload-demo mr_10" :limit=limit action="" :on-change="handleChange" :on-exceed="handleExceed" :accept=accept :auto-upload="false" show-file-list="false">
      <el-button :size=size :type=type>{{btn_text}}</el-button>
    </el-upload>
  </div>
</template>
<script>
export default {
  name:'exportBtn',
  props:{
    size:String,  // 按钮尺寸
    type:String,  // 按钮类型
    limit: String,  // 上传个数限制
    accept: String,  // 上传文件类型限制
    askList:[{'code':'序号'},{'type':'数量'}],
    // 上传文件的列表需要渲染成什么样子 key是你table需要的key  后面的中文是你上传文件的表头
    // 一定要按照顺序！！！
    btn_text:String,  // 按钮文字
  },
  data() {
    return {
      autoWidth: true,
      downloadLoading: false
    }
  },
  created() {
  },
  methods: {
    handleChange(file) {
      let fileTemp = file.raw
      if(fileTemp){
        if((fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || (fileTemp.type == 'application/vnd.ms-excel')){
            this.importfxx(fileTemp)
        } else {
            this.$message({
                type:'warning',
                message:'附件格式错误，请删除后重新上传！'
            })
        }
      } else {
          this.$message({
              type:'warning',
              message:'请上传附件！'
          })
      }
    },
    importfxx(obj) {
      let _this = this;
      // 通过DOM取文件数据
      this.file = obj
      var rABS = false; //是否将文件读取为二进制字符串
      var f = this.file;
      var reader = new FileReader();
      FileReader.prototype.readAsBinaryString = function(f) {
        var binary = "";
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        reader.onload = function() {
        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 = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata就是你想要的东西
            let da = [...outdata]
            let arr = []
            da.map(v => {
                let obj = {}
                for (var i of _this.askList) {
                  for (var o in i) {
                    obj[o] = v[i[o]]
                  }
                  
                }
                arr.push(obj)
            })
            // console.log('arr', arr)
            _this.$emit('upList', arr);
            // return arr
        }
        
          reader.readAsArrayBuffer(f);
        }
        if(rABS) {
            reader.readAsArrayBuffer(f);
        } else {
            reader.readAsBinaryString(f);
        }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
  },
}
</script>

以上，感谢观看