vue中导入导出excel

1 excel模板导出

 <el-form-item>
              <el-button type="primary" plain @click="download">下载模板</el-button>
 </el-form-item>

download() {
        companyApi.download('员工信息模板.xlsx');
},

import request from '../router/axios';
import * as urls from '@/config/env';
import Vue from 'vue'

let companyApi = {
  apiBaseUrl: urls.apiBaseUrl,
  shareBaseUrl: urls.shareBaseUrl,
download: function (fileName) {
    let url = this.apiBaseUrl + '/api/console/company/employee/download';
    // 下载是get请求，增加毫秒值避免浏览器的请求缓存问题
    let time = Date.parse(new Date()) / 1000
    if (url.indexOf('?') === -1) {
      url += '?t=' + time
    } else {
      url += '&t=' + time
    }
    const loading = Vue.prototype.$loading()
    request.get(url, {
      responseType: 'blob'
    }).then(res => {
      this.downloadHandler(res, fileName)
    }).catch((error) => {
      console.log('downloading error!', error)
    }).finally(() => {
      loading.close()
    })
  },
  downloadHandler: function (res, fileName) {
    //let type = res.data.type
    // 如果没找到文件，返回值为application/json
    /* if (type.indexOf('json') !== -1) {
       let reader = new FileReader()
       let data = res.data
       reader.readAsText(data, 'utf-8')
       reader.onload = function () {
         data = JSON.parse(String(reader.result))
         Vue.prototype.$message({
           message: data.errorMessage || '文件下载失败！',
           type: 'error'
         })
       }
       return
     }*/
    // 如果前端传了文件名时，优先用前端传的
    if (!fileName) {
      let content = res.headers['content-disposition']
      fileName = decodeURIComponent(content.substr(content.indexOf('filename=') + 9))
    }

    if ('msSaveOrOpenBlob' in navigator) {
      window.navigator.msSaveOrOpenBlob(new Blob([res.data]), fileName)
    } else {
      let url = window.URL.createObjectURL(new Blob([res.data]))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', fileName)
      document.body.appendChild(link)
      link.click()
    }
  },

2 导入excel模板

<el-form-item>
              <el-upload
                ref="upload"
                action="string"
                accept=".xlsx"
                :limit="1"
                :http-request="uploadExcel"
                :before-upload="beforeAvatarUpload"
                :show-file-list="false"
                :auto-upload="true"
              >
                <el-button type="primary" plain>点击上传</el-button>
              </el-upload>
            </el-form-item>
            
            //http-request="uploadExcel" 自定义上传方法

uploadExcel(params) {
        //调用clearFiles()，清除上次上传的文件，不然只能触发一次上传
        this.$refs.upload.clearFiles();
        let formData = new FormData();
        formData.append("file", params.file)
        companyApi.upload(formData).then((result) => {
          if (result.data.status === 200) {
            //导出错误记录
            if (result.data.data === 1) {
              this.$message.success("导入成功");
            } else {
              this.$message.error("导入员工信息有误，请查看错误报告！")
              companyApi.downloadError(result.data.data);
            }
          } else {
            this.$message.error(result.data.message);
          }
          this.handleList();
        });
      },

2.1 导入没有错误

  if (result.data.data === 1) {
              this.$message.success("导入成功");
  } 

导入时，出现不刷新页面只能导入一次，this.$refs.upload.clearFiles();清理文件后就可以多次导入

2.2 导入，后台验证返回验证不通过的错误模板excel。

post带list参数导出 responseType: ‘blob’

    downloadError: function (data) {
    request({
      url: this.apiBaseUrl + '/api/console/company/employee/downloadErrorExcel',
      method: 'post',
      data: data,
      responseType: 'blob'
    }).then(res => {

      this.downloadHandler(res, "错误报告.xlsx")
    }).catch((error) => {
      console.log('downloading error!', error)
    })
  },