如何使用 window.get 下载文件？

小开

最佳答案

我暂时用下载 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);
});
}

它适用于小文件，但可能不适用于大文件。我认为我应该挖掘溪流更多。

小开

编辑 : syg 回答更好，只需使用下载库。

我提供的答案在 Chrome 上运行良好，但是在 Firefox 和 IE 上你需要一些不同的代码。最好用图书馆。

我有类似的问题(需要通过授权头下载文件，所以这个解决方案没有帮助)。

但是基于这个的答案，你可以使用 createObjectURL来使浏览器保存一个由 FetchAPI 下载的文件。

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
});
});

小开

下面是一个为找到这个属性的任何人使用 node-get 的示例。

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)
}

小开

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");

小开

使用 dowloadjs。这将解析文件头中的文件名。

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");
});
};

小开

我尝试了 window.catch，但是我的 REACT 应用程序把它搞得很复杂

现在我只需修改 window.location.href 并添加像 jsonwebtoken和 other stuff这样的查询参数。


///==== client side code =====
var url = new URL(`http://${process.env.REACT_APP_URL}/api/mix-sheets/list`);
url.searchParams.append("interval",data.interval);
url.searchParams.append("jwt",token)


window.location.href=url;


// ===== server side code =====


// on the server i set the content disposition to a file
var list = encodeToCsv(dataToEncode);
res.set({"Content-Disposition":`attachment; filename=\"FileName.csv\"`});
res.status(200).send(list)

最终的结果实际上是相当不错的，窗口发出请求并下载文件，而不是事件切换移动页面离开，就好像 window.location.href调用就像一个低调的 fetch()调用。

小开

根据其他一些答案，您完全可以使用 window.get 和下载 js来下载文件。但是，对 blob 使用 window.get 会受到浏览器对内存的限制，download.js 也有它的兼容性限制。

如果您需要下载一个大型文件，您不希望将其放在客户端的内存中以增加浏览器的压力，对吗？相反，您可能更喜欢通过流来下载它。在这种情况下，使用 HTML 链接下载文件是最好/最简单的方法之一，特别是通过流下载大型文件。

第一步: 创建和样式化 link 元素

您可以使链接不可见，但仍然可以采取行动。

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()

注释 :

如果需要，可以动态生成 link 元素。
这种方法对于通过流下载在服务器端动态生成的大型文件特别有用

小开

这样更短更有效，没有库只能获取 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);
});

此解决方案不允许您更改下载文件的文件名。文件名将是一个随机 uuid。

小开

一个类似但更清洁和更可靠的解决方案 IMO。

在你的接球活动上。

fetch(...)
.then(res =>
{
//you may want to add some validation here
downloadFile(res);
}
)

下载文件功能是..。

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)

小开

没有库只能获取 API。还可以更改文件名

function myFetch(textParam, typeParam) {
fetch("http://localhost:8000/api", {
method: "POST",
headers: {
Accept: "application/json, text/plain, */*",
"Content-Type": "application/json",
},
body: JSON.stringify({
text: textParam,
barcode_type_selection: typeParam,
}),
})
.then((response) => {
return response.blob();
})
.then((blob) => {
downloadFile(blob);
});
}

下面是下载文件功能

function downloadFile(blob, name = "file.pdf") {
const href = URL.createObjectURL(blob);
const a = Object.assign(document.createElement("a"), {
href,
style: "display:none",
download: name,
});
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(href);
a.remove();
}