是否可以缓存可下载文件并在XHR和非XHR请求之间共享该缓存？

Question

以下是我的情景：

我有一个生成管理工作区大量导出的网址 - 通常大约3mb，生成需要15秒。

当前实现是对按钮上具有download属性的URL的正常同步请求，以强制下载内容。

我想要做的是可以在点击时禁用按钮，然后在服务器响应并开始下载时重新启用它。这对于同步请求来说非常棘手，但是对于XHR请求应该很容易。唯一的问题是你无法通过XHR触发下载。

然而，如果可能的话，理论上的解决方案可能如下：

1. XHR导出数据请求
2. 点击时禁用按钮，表示正在处理用户请求
3. 响应返回时缓存数据（再次为3mb的原始字节）
4. 将download和href属性附加到按钮或其他一些锚元素
5. 触发元素上的click()事件，以便同步重新请求数据导出
6. 但是，不要再次从服务器请求，只需获取该URL的本地缓存内容，以便立即开始下载。

这可能吗？

Answer 1

我不确定它是否适用于您的用例，但是根据您给我们的内容，我会说：

使用xhr.responseType = 'blob'属性从XHR请求Blob。

然后，从响应中，您可以创建一个名为URL.requestObjectURL(blob)的对象网址，您可以将其作为锚点href属性传递。

这样，您就可以在用户的​​计算机上缓存您的响应。

但请注意，在用户关闭当前窗口或硬刷新页面之前，此Blob / Object URL将被缓存，因此您必须调用URL.revokeObjectURL(yourAnchor.href)将其从缓存中释放。

所以有些代码阻止：

var xhr = new XMLHttpRequest();
xhr.onload = function(){
  var blob = this.response;
  yourAnchor.href = URL.createObjectURL(blob);
  };
xhr.responseType = 'blob';
xhr.open(yourURL);
xhr.send();

对于重新触发点击部分，我不记得yourAnchor.click()的浏览器支持，但yourAnchor.innerHTML='processing as finished, please click here to confirm the download'可能有效。