前端实现导入导出excel的功能

导入

export function importExcel(params){
  let formData = new FormData()
  for(var key in params){
    FormDataEvent.append(key,params[key])
  }
  return axios.post("/api","/importExcel",formData)
}

<template>
  <div>
    <el-upload action="' '" class="avatar-uploader" :on-change="handleFailureExport" :auto-upload="false"
      ref="uploadIconFailureExport" :show-file-list="false" accept=".xls,.xlsx">
      <el-button slot="trigger" type="primary" size="mini" @click='importData'>导入</el-button>
    </el-upload>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      importData() {
        this.$refs.uploadIconFailureExport.showPopper = false
      },
      handleFailureExport(file, fileList) {
        let isXLSX = file.raw.type == "applocation/vnd.ms-excel"
        if (!isXLSX) {
          this.$message({
            showClose: true,
            message: '上传文件只能是xls格式',
            type: "warning"
          })
        } else {
          importExcel({file:file.raw}).then(res=>{

          })
        }
      }
    }
  }
</script>

<style scoped lang='scss'>

</style>

导出

export function exportRecord(params){
    return axios.post("/api","inWareHou/exportRecord",params,{
           responseType: 'blob',
           headers:{'Content-Type': 'application/json'}
     })
}


exportRecord().then(res=>{
        //创建一个隐藏的a连接，
    const link = document.createElement('a');
    
    let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});   //lsx
    let blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});   //xlsx
    
    link.style.display = 'none';
    //设置连接
    link.href = URL.createObjectURL(blob);
    link.download = '自定义文件名'; 
    document.body.appendChild(link);
    //模拟点击事件
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(blob)
})