export const downloadFile
= (filename, fileUrl
) => {
const token
= getToken
();//获取当前登录的token方法
const xhr
= new XMLHttpRequest
()
const url
= fileUrl
;//请求的api
xhr.open
('get', url, true
)
xhr.setRequestHeader
('Authorization',
`${token}`) // 给后端发送请求头
xhr.responseType
= 'blob'
xhr.onload
= function
(e
) {
if (this.status
=== 200
) {
const blob
= this.response
const urlObject
= window.URL
|| window.webkitURL
|| window
const export_blob
= new Blob
([blob
])
const a
= document.createElement
('a') // 利用a标签特性下载
const url
= urlObject.createObjectURL
(export_blob
)
a.href
= url
a.download
= filename
a.click
()
}
}
xhr.send
()
}
这个使用是在Glory-Fast项目的用户的列表下载模块,用户导出整个用户列表的excel,有兴趣可以看一下项目地址,具体使用位置如下图的用户导出button
现阶段做过的项目涉及下载的有两种
存储在阿里云上的
请求后台拿到鉴权和地址window.location = result;直接下载
export const downloadFile
= function (fileurl,downloadToken
) {
var url
= appServerUrl
;
const headers
= {
'Content-Type': 'text/plain; charset=UTF-8',
"Token": downloadToken,
"Host": host,
"Connection": 'keep-alive',
"User-Agent": 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.116 Safari/537.36',
"Accept": '*/*',
"Referer": appHost,
"Origin": appHost,
"Sec-Fetch-Mode": 'no-cors'
};
return OSS.urllib.request
(url,
{
method:
'GET',
headers
}).then
(function
(result
) {
var creds
= JSON.parse
(result.data
);
var client
= new OSS
({
region: region,
accessKeyId: creds.AccessKeyId,
accessKeySecret: creds.AccessKeySecret,
stsToken: creds.SecurityToken,
bucket: bucket
});
var result
= client.signatureUrl
(fileurl,
{
response:
{
'content-disposition': 'attachment; filename="' + getFilenambypunct
(fileurl,
'_') +
'"'
}
});
window.location
= result
;
return result
;
});
};
请求返回的文件数据流
模拟a标签下载请求,如文章开篇
