首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue用post下载excel表

一次在vue中使用post进行excel表下载的实战记录

2022-07-29 10:00:54 作者：_哑巴湖大水怪_

最近遇到了需求,觉着有必要给大家总结下,这篇文章主要给大家介绍了关于一次在vue中使用post进行excel表下载的实战记录,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

一、一般大家下载excel都是使用get方法，直接点击下载

就像这样，我就不多说了，大家应该都可以的啦 🏃‍♀️

 <!-- 导出提示框 -->
    <Modal
      title="导出"
      :show.sync="exportVisible"
      :showfooter="false"
      @close="closeExportFiles"
    >
      <exportFiles
        ref="exportFilesDom"
        :model="exportForm"
        export-url="导出链接"
      />
    </Modal>

二、vue用post下载excel表

这次因为导出的excel文件表头有点复杂，后端弄了很久并且是个post请求，我就自己也重新写的

后端发来的下载的话是文件流，获取到的数据是乱码，需要转blob然后进行下载，下载的话就是使用普遍的在网页上创建一个 a 链接，然后挂载上 a 链接这样的方法，点击下载

三、下面是具体的实现

3.1 post的封装

将请求方法封装了一下,因为以前的方法都在判断响应的 code 等于200，我前期做的时候请求一直再走 catch 里面，我萌了很久，我太菜了，最后发现返回的是乱码，没有返回code什么的，所以在axios的响应函数里面一直在走 Promise.reject(),就走catch里面,所以封装了下面的方法

// 文件下载导出
http.exportExcel = (url,data,config) => {
  return instance.post(url,data,config).then(res => {
        return res
  })
}

url：请求地址

data：请求参数 3.config：请求时转为blob，所以需要设置 responseType:'blob'

3.2 请求的方法

主要代码解释都放在下面的注释中了，就不再重新解释了，主要是设置请求头中的 responseType:'blob'

async reportExport(type){
        // console.log(this.multipleSelection)
        this.type = type
        if(type === 2 ){
          if(this.multipleSelection.length<=0){
            return this.$message.error('请先选择要导出的数据')
          }
        }
        let ids = []
        for(let obj of this.multipleSelection){
            ids.push(obj.id)
        }
        let form1 = {
              type:type,
              ids:ids,
              date:this.dayTime,          
              }
        let infoMessage =  this.$message.info('请稍后正在导出中') // 这个是拿到element中this.$message的实力对象，后面调用close关闭
       try {
       // responseType:'blob' 重点，设置将后端传回的数据进行blob转化，不然乱码
          const data = await this.$http.exportExcel('请求的url',form1,{responseType:'blob'})
          this.download(data) // 导出excel，这个方法下面会有解释
          infoMessage.close() // 关闭上方的提示信息，不然两个提示信息会同时出现
          this.$message.success('导出成功')
      } catch (error) {
        console.log(error)
      } 
    },

3.3 download下载方法的封装

// 下载文件
    download (data) {
        if (!data) {
            return
        }
        window.URL = window.URL || window.webkitURL // 兼容性
        // 创建一个 URL 这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
        let url = window.URL.createObjectURL(new Blob([data])) 
        let link = document.createElement('a') // 创建一个a元素
        link.style.display = 'none' // 让a元素在页面中隐藏
        link.href = url // 绑定 a 元素的 href 为当前的url
        let exportName = this.type == 1 ? this.dayTime : this.belongMonth
        link.setAttribute('download', `${exportName}.xlsx`) // 设置 a 元素 download属性，属性名为后面的值 
        document.body.appendChild(link) // 添加到页面中
        link.click() // 点击a元素 下载excel文件
        window.URL.revokeObjectURL(url) //卸载url，释放内存
    },

1.window.webkitURL是[webkit]内核的实现（一般手机上就是使用这个），window.webkitURL和window.URL是一样的，window.URL是标准定义，所以做一个兼容

2.标签变量名.setAttribute("属性名","属性值");害怕大家写多了框架，忘了这些哈哈哈哈

四、总结

在使用post请求，后端返回的data为乱码时，不能判断返回数据的 code==200，然后就是需要在请求头里面的 responseType:'blob'，就OK啦。

到此这篇关于一次在vue中使用post进行excel表下载的文章就介绍到这了,更多相关vue用post下载excel表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！