javascript - 如何在javascript中检测下载完成

Question

我想在一个 javaScript 函数中执行两个操作

强制下载 csv 文件

发送 ajax 请求以标记表中记录已下载的记录。

由于这两个操作都会向用户显示提示和对话框，因此我想延迟执行第二个事件，直到第一个事件完成。

当用户打开页面时，他们会看到当前记录的列表。他们检查他们希望处理的记录。然后将检查的记录打包，并向用户显示下载的“保存”或“打开”框。当该操作完成时，应该执行 ajax 请求。

我的想法是我可以检测到何时从文档中删除了“a”。但我不确定我会怎么做。

这是我的下载代码

    var a = window.document.createElement('a');
    a.href = window.URL.createObjectURL(new Blob(exportArray, {type: 'text/csv'}));
    a.download = 'jobCostHandOff.csv';

    // Append anchor to body.
    document.body.appendChild(a)
    a.click();

    // Remove anchor from body
    document.body.removeChild(a)

Answer 1

我已经在具有以下工作流程的 Web 应用程序中实现了这样的机制:

用户在他们的计算机上选择一个文件

他们配置应用程序的选项

他们点击提交按钮

加载程序开始为客户端设置动画

浏览器将整个表单发送到服务器进行处理

处理(实际上是将吉他乐谱转换为指法谱)产生一个文本/纯文本文件，该文件存储在服务器上(但尚未发送):一个带有生成文件链接的小 JSON 被发回。该 JSON 数据代表成功或错误。在出错的情况下，将向用户显示消息。在成功的情况下，状态字段设置为 OK有效载荷包含文件的链接。

处理 AJAX 调用的 JS 代码在成功后触发下载。

浏览器向用户显示通常的(例如在 Firefox 中)“打开或保存文件”对话框

Web 应用程序检测到对话框的打开并隐藏加载程序。

它似乎与您的需求非常相似。

解决方案的要点是:

通过设置 src 来触发文件下载。 iframe 的属性隐藏在页面

服务器发送 cookie 以响应下载文件的请求

计时器上的 JS 代码检查文档的 cookie(非常幸运的是，其中包括 iframe 的 cookie)并在看到“神圣 cookie”时确定文件下载已经开始，这是唯一的事件代码可以抓取。

快速浏览我的网络应用程序的 PHP 代码，我看到了:

// This cookie is for the jQuery.fileDownload plugin
header('Set-Cookie: fileDownload=true; path=/');

您有在代码注释中执行最后一个项目符号项的 JS 代码的名称 :-) 我编写注释代码的无数原因中的另一个原因......

HTH。