vue中导出excle表格(后端返回文件流的形式)

首先在api中定义接口

  export function batchExport(obj) {
  return request({
    url:'/user/exportUserInfo',
    method:'post',
    data:obj,
    responseType: 'blob' //这个很重要
  })
}

然后再vue文件中引用

 import {batchExport}  from "@/api/basicFarme/user";

再methods中使用

  methods: {
    pldc(){
      let _this = this;
      let obj = {
        id:_this.id
      }
      batchExport(obj)
        .then((res)=>{
          var blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // type这里表示xlsx类型
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = '用户信息导出.xls' // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
      })
      .catch(error => {
        this.$message.error({
            title: '错误',
            desc: '网络连接错误'
        })
  }
}

到此 就可以成功下载导出excle了!

posted @ 2021-04-01 16:02  清风~~徐来  阅读(559)  评论(0编辑  收藏  举报