需求:点击下载按钮调用接口下载文件,文件名为headers中content-disposition里的fileNmae

一开始从网络请求中可以看到响应体content-disposition,但是打印response.headers[“content-disposition”]为undefined,后面查到需要后端设置response.setHeader(“Access-Control-Expose-Headers”, “Content-Disposition”) 前端才能正常取到值

我们这个项目封装了Axios请求,所以不好取header,这里单独封装了下载文件的方法

exportExcel(){
     const  headers = {
       'content-type': 'application/vnd.ms-excel',
       'X-Access-Token':  token, //token
     }
     Axios({
         method: "get",
         url: this.exportXlsUrl,     //接口地址
         params: this.queryParam,   // 你的传参
         headers: headers,
         responseType: "blob",    // 指定获取数据的类型为blob
       }).then(
       function (response) {
         var fileName = decodeURIComponent(response.headers["content-disposition"].split("=")[1])
         const data = response.data;
         if (!data) {
         this.$message.warning('文件下载失败')
         return
       }
       if (typeof window.navigator.msSaveBlob !== 'undefined') {
         window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName)
       } else {
         const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
         const link = document.createElement('a')
         link.style.display = 'none'
         link.href = url
         link.setAttribute('download', fileName)
         document.body.appendChild(link)
         link.click()
         document.body.removeChild(link) // 下载完成移除元素
         window.URL.revokeObjectURL(url) // 释放掉blob对象
       }
       }
     ).catch(function (err) {
       console.log(err)
     })
   },
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐