使用fetch的例子如下所示:

 fetch(<"yoururl">, {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + <your access token if need>
    },
       })
.then((response) => response.blob())
.then((blob) => {
// 2. Create blob link to download
 const url = window.URL.createObjectURL(new Blob([blob]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `sample.xlsx`);
 // 3. Append to html page
 document.body.appendChild(link);
 // 4. Force download
 link.click();
 // 5. Clean up and remove the link
 link.parentNode.removeChild(link);
})

您可以粘贴在Chrome控制台进行测试。下载的文件是“sample.xlsx”，希望对大家有所帮助!

正如gengkev在他的评论中提到的，看起来最好/唯一的方法是使用异步xhr2调用:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'blob:http%3A//your.blob.url.here', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status == 200) {
    var myBlob = this.response;
    // myBlob is now the blob that the object URL pointed to.
  }
};
xhr.send();

更新(2018):对于可以安全使用ES5的情况，Joe在下面给出了一个更简单的基于ES5的答案。

查看从XHR请求中获取BLOB数据，指出BlobBuilder在Chrome中不工作，所以你需要使用:

xhr.responseType = 'arraybuffer';

现代的解决方案:

let blob = await fetch(url).then(r => r.blob());

url可以是对象url，也可以是普通url。

按照@Kaiido的回答，另一种重载URL而不搞乱URL的方法是像这样扩展URL类:

export class URLwithStore extends URL {
  static createObjectURL(blob) {
    const url = super.createObjectURL(blob);
    URLwithStore.store = { ...(URLwithStore.store ?? {}), [url]: blob };
    return url;
  }

  static getFromObjectURL(url) {
    return (URLwithStore.store ?? {})[url] ?? null;
  }

  static revokeObjectURL(url) {
    super.revokeObjectURL(url);
    if (
      new URL(url).protocol === "blob:" &&
      URLwithStore.store &&
      url in URLwithStore.store
    )
      delete URLwithStore.store[url];
  }
}

使用

const blob = new Blob( ["foo"] );
const url = URLwithStore.createObjectURL( blob );
const retrieved = URLwithStore.getFromObjectURL( url );
console.log( "retrieved Blob is Same Object?", retrieved === blob );

再次获取blob URL的问题是，这将创建blob数据的完整副本，因此它将在内存中只有一次，而不是两次。对于大的Blobs，这可以很快地消耗你的内存。

这是相当不幸的，文件API不让我们访问当前链接的Blob，当然他们认为web作者应该在创建时自己存储Blob，这是正确的:

最好的方法是存储创建blob时使用的对象:// URL。

如果您担心这会阻止Blob被垃圾收集，那么您是对的，但是Blob:// URL首先也是如此，直到您撤销它。所以持有指向Blob的指针不会改变任何东西。

但是对于那些不负责创建blob:// URI的人(例如，因为它是库创建的)，我们仍然可以通过覆盖默认URL来自己填补API漏洞。createObjectURL和URL。revokeObjectURL方法，这样它们就存储了对传递对象的引用。

确保在调用生成blob:// URI的代码之前调用这个函数。

// Adds an URL.getFromObjectURL( <blob:// URI> ) method // returns the original object (<Blob> or <MediaSource>) the URI points to or null (() => { // overrides URL methods to be able to retrieve the original blobs later on const old_create = URL.createObjectURL; const old_revoke = URL.revokeObjectURL; Object.defineProperty(URL, 'createObjectURL', { get: () => storeAndCreate }); Object.defineProperty(URL, 'revokeObjectURL', { get: () => forgetAndRevoke }); Object.defineProperty(URL, 'getFromObjectURL', { get: () => getBlob }); const dict = {}; function storeAndCreate(blob) { const url = old_create(blob); // let it throw if it has to dict[url] = blob; return url } function forgetAndRevoke(url) { old_revoke(url); try { if(new URL(url).protocol === 'blob:') { delete dict[url]; } } catch(e){} } function getBlob(url) { return dict[url] || null; } })(); // Usage: const blob = new Blob( ["foo"] ); const url = URL.createObjectURL( blob ); console.log( url ); const retrieved = URL.getFromObjectURL( url ); console.log( "retrieved Blob is Same Object?", retrieved === blob ); fetch( url ).then( (resp) => resp.blob() ) .then( (fetched) => console.log( "fetched Blob is Same Object?", fetched === blob ) );

另一个优点是它甚至可以检索MediaSource对象，而在这种情况下，获取解决方案只会出错。