- 正常情况下只需要请求url地址,后端会强制浏览器下载(此处由laravel header头处理)
- 项目前后端使用api形式构建,前端每次请求都需要向后端发送token令牌。
- vue里面
<a href="/images/myw3schoolimage.jpg" download="w3logo">
好像这样可以下载,但是这里请求未带token,所以改用了fecth的形式 - 现在后端验证了token,返回了数据(乱码形式),却并没有强制浏览器下载,请问该如何处理?
<a href="/images/myw3schoolimage.jpg" download="w3logo">
好像这样可以下载,但是这里请求未带token,所以改用了fecth的形式你可以试试这个
function saveFile(url) {
return new Promise(function(resolve, reject) {
// Get file name from url.
var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0];
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
resolve(xhr);
};
xhr.onerror = reject;
xhr.open('GET', url);
xhr.send();
}).then(function(xhr) {
var a = document.createElement('a');
a.href = window.URL.createObjectURL(xhr.response); // xhr.response is a blob
a.download = filename; // Set the file name.
a.style.display = 'none';
document.body.appendChild(a);
a.click();
return xhr;
});
}
function download(urls) {
return Promise.all(urls.map(saveFile));
}
(解决了)其实就是搞清楚一个问题关键点:请求一个url,该url需要带上token信息,请求验证通过后,后端会强制浏览器下载;
上面问题有个命题误区就是一开始限定了token必须放在header里面,所以必须要使用fetch的形式去获取,然后一直纠结怎么把fetch到的数据转成文件;
其实只需要把token放在url里面让后端在url取出并验证,响应自然就成了下载啦。
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
2 回答4.7k 阅读✓ 已解决
4 回答4.3k 阅读✓ 已解决
看到后端是PHP,header修改,最后把图片直接echo出来,而不是返回给前端。