是否有任何方法可以在下载开始后使用锚标记侦听下载完成事件?

Question

点击锚标记自动下载。锚标记上是否有可以监听的事件?

downloadMyFile(){
const link = document.createElement('a');
link.setAttribute('href', 'abc.net/files/test.ino');
link.setAttribute('download', `products.csv`);
document.body.appendChild(link);
link.click();
link.remove();
}

Answer 1

当下载完成时，客户端将无法通知您。

你有两种可能的解决方案，这主要取决于文件的大小。

选项1:使用ajax调用代替，您可以在内存中流式传输整个文件，然后让浏览器将其下载到文件中(这将是即时的)。这意味着您可以全面查看不同的下载事件。

// Get the content somehow 
// and then make the browser download
window.location.href = window.URL.createObjectURL(content);

选项2:用服务器监视它。我建议您向请求添加UID，如:

link.setAttribute('href', 'abc.net/files/test.ino?uid='+myUID);

让服务器跟踪该请求并使用UID存储详细信息，然后您可以让另一个路由在提供UID时报告请求的状态。这样做的问题是，您必须不时地轮询以了解下载是否完成。

由于我们不知道你方请求的确切用途，因此很难判断是否有其他可能性。但是恕我直言，知道文件是否已经完成下载并没有真正的用处。我不明白你为什么一开始就想要这个。我看到它是一个CSV文件，它们通常不是那么大，下载应该很快…除非是因为它需要花费很多时间才能开始，因为它必须在之前生成?在这种情况下，我建议你看看我之前做的一个很受欢迎的问题/答案。如何显示加载动画，而文件生成下载?

编辑:由于文件可能很大，不适合内存，您可以使用FileSystem API将文件写入磁盘。这样，您就可以将来自请求的流直接管道到文件系统。因为流有一个close事件，所以你可以知道它什么时候结束。