syg*_*syg 37 javascript fetch fetch-api
如果我想下载文件,我应该在then下面的块中做什么？
function downloadFile(token, fileId) {
let url = `https://www.googleapis.com/drive/v2/files/${fileId}?alt=media`;
return fetch(url, {
method: 'GET',
headers: {
'Authorization': token
}
}).then(...);
}
请注意,代码位于客户端.
Luc*_*tos 77
这更短更高效，没有库只获取 API
const url ='http://sample.example.file.doc'
const authHeader ="Bearer 6Q************"
const options = {
headers: {
Authorization: authHeader
}
};
fetch(url, options)
.then( res => res.blob() )
.then( blob => {
var file = window.URL.createObjectURL(blob);
window.location.assign(file);
});Mar*_*ski 41
编辑:syg答案更好.只需使用downloadjs库.
我提供的答案在Chrome上运行良好,但在Firefox和IE上你需要一些不同的代码变体.为此使用库更好.
我有类似的问题(需要传递授权标题来下载文件,所以这个解决方案没有帮助).
但基于此答案,您可以使用createObjectURL浏览器保存Fetch API下载的文件.
getAuthToken()
.then(token => {
fetch("http://example.com/ExportExcel", {
method: 'GET',
headers: new Headers({
"Authorization": "Bearer " + token
})
})
.then(response => response.blob())
.then(blob => {
var url = window.URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = "filename.xlsx";
document.body.appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
a.click();
a.remove(); //afterwards we remove the element again
});
});
syg*_*syg 34
我通过使用download.js和暂时解决这个问题blob.
let download = require('./download.min');
...
function downloadFile(token, fileId) {
let url = `https://www.googleapis.com/drive/v2/files/${fileId}?alt=media`;
return fetch(url, {
method: 'GET',
headers: {
'Authorization': token
}
}).then(function(resp) {
return resp.blob();
}).then(function(blob) {
download(blob);
});
}
它适用于小文件,但可能不适用于大文件.我想我应该更多地挖掘Stream.
Zib*_*bri 15
function download(dataurl, filename) {
var a = document.createElement("a");
a.href = dataurl;
a.setAttribute("download", filename);
a.click();
return false;
}
download("data:text/html,HelloWorld!", "helloWorld.txt");或者：
function download(url, filename) {
fetch(url).then(function(t) {
return t.blob().then((b)=>{
var a = document.createElement("a");
a.href = URL.createObjectURL(b);
a.setAttribute("download", filename);
a.click();
}
);
});
}
download("https://get.geojs.io/v1/ip/geo.json","geoip.json")
download("data:text/html,HelloWorld!", "helloWorld.txt");使用下载js。这将从标题中解析文件名。
fetch("yourURL", {
method: "POST",
body: JSON.stringify(search),
headers: {
"Content-Type": "application/json; charset=utf-8"
}
})
.then(response => {
if (response.status === 200) {
filename = response.headers.get("content-disposition");
filename = filename.match(/(?<=")(?:\\.|[^"\\])*(?=")/)[0];
return response.blob();
} else {
return;
}
})
.then(body => {
download(body, filename, "application/octet-stream");
});
};
这是一个使用 node-fetch 的示例，供任何找到此示例的人使用。
reportRunner({url, params = {}}) {
let urlWithParams = `${url}?`
Object.keys(params).forEach((key) => urlWithParams += `&${key}=${params[key]}`)
return fetch(urlWithParams)
.then(async res => ({
filename: res.headers.get('content-disposition').split('filename=')[1],
blob: await res.blob()
}))
.catch(this.handleError)
}
根据其他一些答案，您绝对可以使用 window.fetch 和download.js来下载文件。但是，将 window.fetch 与 blob 一起使用会受到浏览器对内存的限制，并且 download.js 也有其兼容性限制。
如果你需要下载一个大文件，你不想把它放在客户端的内存中给浏览器带来压力，对吧？相反，您可能更喜欢通过流下载它。在这种情况下，使用 HTML 链接下载文件是最好/最简单的方法之一，特别是通过流下载大尺寸文件。
第一步：创建链接元素并设置其样式
您可以使链接不可见，但仍可操作。
HTML：
<a href="#" class="download-link" download>Download</a>
CSS：
.download-link {
position: absolute;
top: -9999px;
left: -9999px;
opacity: 0;
}
第二步：设置href链接的值，并触发click事件
JavaScript
let url = `https://www.googleapis.com/drive/v2/files/${fileId}?alt=media`;
const downloadLink = document.querySelector('.download-link')
downloadLink.href = url + '&ts=' + new Date().getTime() // Prevent cache
downloadLink.click()
注意事项：
在我看来，这是一个类似但更清洁、更可靠的解决方案。
在你的获取函数上...
fetch(...)
.then(res =>
{
//you may want to add some validation here
downloadFile(res);
}
)
downloadFile 函数是...
async function downloadFile(fetchResult) {
var filename = fetchResult.headers.get('content-disposition').split('filename=')[1];
var data = await fetchResult.blob();
// It is necessary to create a new blob object with mime-type explicitly set
// otherwise only Chrome works like it should
const blob = new Blob([data], { type: data.type || 'application/octet-stream' });
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE doesn't allow using a blob object directly as link href.
// Workaround for "HTML7007: One or more blob URLs were
// revoked by closing the blob for which they were created.
// These URLs will no longer resolve as the data backing
// the URL has been freed."
window.navigator.msSaveBlob(blob, filename);
return;
}
// Other browsers
// Create a link pointing to the ObjectURL containing the blob
const blobURL = window.URL.createObjectURL(blob);
const tempLink = document.createElement('a');
tempLink.style.display = 'none';
tempLink.href = blobURL;
tempLink.setAttribute('download', filename);
// Safari thinks _blank anchor are pop ups. We only want to set _blank
// target if the browser does not support the HTML5 download attribute.
// This allows you to download files in desktop safari if pop up blocking
// is enabled.
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank');
}
document.body.appendChild(tempLink);
tempLink.click();
document.body.removeChild(tempLink);
setTimeout(() => {
// For Firefox it is necessary to delay revoking the ObjectURL
window.URL.revokeObjectURL(blobURL);
}, 100);
}
（downloadFile函数源码：https://gist.github.com/davalapar/d0a5ba7cce4bc599f54800da22926da2）