vue +element-ui 中excel 导入导出功能

一，导出功能

<el-button size="mini" class="export" style="width: 70px" @click="downLoadExcel()">导出
</el-button>

 先写一个botton 按钮，设置点击事件,在 methods: {}方法中调用downLoadExcel()方法   如下：

   //导出按钮
    downLoadExcel() {
      let data = {  }   //可以传入参数
      downLoadExcel(data).then((res) => {
        let ex = exportData(res)
      })
    },

工具类中封装文件下载

/**
 * wisy:封装文件下载
 * @param res 接口请求的返回值
 * @returns {Object} status:1成功，0失败；msg：结果信息
 */
export function exportData(res) {
  let result = {
    status: 1,
    msg: '下载成功',
  }
  try {
    let blob = new Blob([res.data])
    let content = res.headers['content-disposition']
    let fileName = content.replace('attachment;', '').replace('filename=', '').replace(' ', '')
    let link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = decodeURI(fileName)
    link.click()
    window.URL.revokeObjectURL(link.href)
  } catch (e) {
    result.status = 0
    result.msg = e.toString()
  } finally {
    return result
  }
}

 调用后台导出excel的接口，完成导出

​​​​// 附件下载
export function downLoadExcel(data) {
  data = reData(data)
  return request({
    url: 'XXXXXXXXXXXXXXXX'
    method: 'post',
    responseType: 'blob',
    data,
  })
}

 二，导入功能

  <el-upload
                class="upload-btn"
                :action="actionUrl"//必选参数，上传的地址
                :data="uploaddata" //上传时附带的额外参数
                :on-success="successUpload"//文件上传成功时的钩子
                :on-error="errorUpload"   //文件上传失败时的钩子
                :before-upload="beforeAvatarUpload"//上传文件之前的钩子，参数为上传的文件                 
                :show-file-list="false"//是否显示已上传文件列表
                accept=".xlsx,.xls"//接受上传的文件类型
              >
                <el-button type="primary" size="mini" style="width: 70px">导入</el-button>
              </el-upload>

首先上传后台传入接口地址和附带的参数，如下：

export default {
 data() {
  return {
      actionUrl: window.g.ApiUnion + 'XXXXXXXX',//网络地址+接口地址名
      uploaddata: {
        token: getToken(),      //需要传入一个getToken参数
        time: new Date().getTime().toString() //时间
          },
        }
}

接口调用成功后， 使用 before-upload 限制用户上传的excel格式和大小。如下判断了格式

    beforeAvatarUpload(file) {
      const splitName = file.name.split('.')
      const maxSize = file.size / 1024 / 1024 < 5
      if (splitName[splitName.length - 1] !== 'xls' && splitName[splitName.length - 1] !== 'xlsx') {
        this.$message.error('上传文件只能是 xls、xlsx格式!')
      }
    },

成功后,文件上传成功的钩子，调用successUpload()方法，以下成功后的提示可根据需要自由说明

 //导入成功后得提示
    successUpload(file) {
      let head = file.head //获取表头错误信息
      let that = this
      // if (head.st == '-1') {
      //   //获取表头错误信息-1 接口操作失败
      //   this.$message({
      //     type: 'error',
      //     message: '失败' + head.msg,
      //   })
      // }
      if (typeof file.body.resultMap.successNum !== 'undefined') {
        //判断上传错误
        if (file.body.resultMap.successNum !== 0) {
          this.$message({
            type: 'success',
            message: '上传成功' + file.body.resultMap.successNum + '条',
          })
          this.getlist()
        } else {
          this.$message({
            type: 'error',
            message: '上传失败!' + '(上传' + file.body.resultMap.successNum + '条)',
          })
        }
      }
    },