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

javascript fetch-api

2022-08-30 04:08:49

如果我想下载一个文件，我应该在下面的块中做什么？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(...);
}

请注意，代码位于客户端。

答案 1

编辑：syg答案更好。只需使用 downloadjs 库。

我提供的答案在Chrome上运行良好，但在Firefox和IE上，您需要此代码的一些不同变体。最好使用库。

我遇到了类似的问题（需要传递授权标头才能下载文件，因此此解决方案没有帮助）。

但基于这个答案，你可以用它来让浏览器保存通过获取API下载的文件。createObjectURL

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

答案 2

这更短，更高效，没有库只获取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。