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

如果要下载文件，在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(...);
}

请注意，代码在客户端。

编辑：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         
        });
    });

我通过使用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。

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

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

这是一个使用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，但最终由于我的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.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()

注意事项：

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