使用fetch()获取响应头的content-disposition拿到文件名，下载Excel文件

需求就是下载一个Excel文件，包括下载，导出，都是调用后端的接口。因为文件名返回再了响应头的content-disposition。前端需要进行一个处理，拿到文件名。

先上代码

  downloadDefaultExcelTemplate() {const url = process.env.BASE_API + '/sys/get_account_begin_temp/'const a = document.createElement('a')// 使用fetch方法获取response.headers响应头fetch(url).then(res => {console.log('res', res)// 切割出文件名const fileNameEncode = res.headers.get('content-disposition').split('filename=')[1]// 解码const fileName = decodeURIComponent(fileNameEncode)console.log('fileName', fileName)// 使用blob()方法获取blob对象数据res.blob().then(res => {console.log('bolbs', res)// 设置type类型const blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; application/octet-stream'})const fileUrl = window.URL.createObjectURL(blob)a.href = fileUrlconsole.log('url', fileUrl)a.setAttribute('download', fileName)a.style.display = 'none'a.click()a.remove()})})},

这里使用fetch（）去调用，是因为需要拿到响应头。而我们项目封装的api，经过响应拦截，直接返回的是response.data。拿不到response的话，就没法拿到其中的headers。为了不影响全局的api使用，就对下载文件的方法，单独使用fetch来处理。

注意事项：
fetch(url).then( res => res.blob() ) .then( blob =>{ } )
fetch(）的第一个then回调返回的是response，第二个then返回的才是后端的数据。
但考虑到我需要获取文件名，并进行分割，解码等操作。所以我直接在fetch（）的第一个then里获取response之后进行代码逻辑的编写。我们需要将response转为blob对象数据，可以使用res.blob()方法。
decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

const blob = res.blob( ) // 这种写法是错误的，取到的是undefined
它的回调res才是真正想要的blob数据
res.blob().then(res=>{
console.log(‘blob值:’,res)
})

使用fetch()获取响应头的content-disposition拿到文件名，下载Excel文件相关推荐

node获取响应头Authorization的方法
node获取响应头Authorization的方法首先申明这个问题不是前端来处理的,而是后端后端后端后端后端后端后端后端相信大家都碰到过Refused to get unsafe header & ...
react接收后端文件_React获取Java后台文件流并下载Excel文件流程解析
记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下. 首先在java后台中设置response中的参数: public void exportExcel(Htt ...
java文件流下载excel_React获取Java后台文件流下载Excel文件
记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下. 首先在java后台中设置response中的参数: public void exportExcel(Htt ...
php使用curl_exec 获取响应头存在多个HEADER问题解决
前言: 近期在接一个第三方支付的时候,遇到一个比较头大的问题,因为第三方会把部分响应结果放在header里传输,需要从头里取数据后解密使用,我在本地是正常的,但是放到服务器上就一直是失败,因为取不到对 ...
python 批量获取ip的国家省份市区以及运营商生成excel文件
废话不多说直接上代码这里有几个点需要注意下 #!/usr/bin/env python # -*- coding: utf-8 -*- import requests from bs4 import ...
python构造响应头_Python爬虫库requests获取响应内容、响应状态码、响应头
首先在程序中引入Requests模块 import requests 一.获取不同类型的响应内容在发送请求后,服务器会返回一个响应内容,而且requests通常会自动解码响应内容 1.文本响应内容 ...
python request返回的响应_Python爬虫库requests获取响应内容、响应状态码、响应头...
首先在程序中引入Requests模块 import requests 一.获取不同类型的响应内容在发送请求后,服务器会返回一个响应内容,而且requests通常会自动解码响应内容 1.文本响应内容 ...
php获取curl头_php中CURL请求头和响应头获取方法
本文主要和大家分享php中CURL请求头和响应头获取方法,希望能帮助到大家. 1.从CURL中获取响应头$oCurl = curl_init(); // 设置请求头, 有时候需要,有时候不用,看请求网 ...
网络编程（发送get和post请求到服务器端，并获取响应）
一:B/S结构,浏览器端到服务器端通信依赖http协议交互过程: 1:在浏览器地址栏输入http://ip:port/应用/资源路径 2:浏览器根据ip和服务器建立连接,port确定和那个应用进行交 ...

使用fetch()获取响应头的content-disposition拿到文件名，下载Excel文件

使用fetch()获取响应头的content-disposition拿到文件名，下载Excel文件相关推荐

最新文章

热门文章