如何在javascript中检测下载完成

Question

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

1. 强制下载 csv 文件

2. 发送 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 中）“打开或保存文件”对话框
• 网络应用检测到对话框的打开并隐藏加载器。

这似乎与您的需要非常相似。

解决方案的要点是这样的：

• 通过设置隐藏在页面中的iframe 的src 属性来触发文件下载
• 服务器发送 cookie 以响应下载文件的请求
• 计时器上的 JS 代码检查文档的 cookie（非常幸运的是，其中包括 iframe 的 cookie）并在看到“神圣的 cookie”时确定文件下载已开始，即只有代码可以抓取的事件。

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

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

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

HTH。