时间戳

首页 > 解决方案 > 禁用下载链接（使用 HTML5 下载属性）直到下载完成

html - 禁用下载链接（使用 HTML5 下载属性）直到下载完成

问题描述

我有一个网站，其中包含以下 HTML 链接：

<a href="/api/admin_csv_dl" download="adminCSV.csv">Download CSV</a>

这可行，但我使用的 API 需要一段时间才能生成 .csv 文件，因此在单击按钮和开始下载之间存在延迟。我想禁用链接直到下载完成，或者至少直到它开始（因为下载本身相对没有时间）然后重新启用它，但我不知道如何“公开”那个使用 HTML5 下载属性时的信息。

如果我使用 ajax 之类的东西来点击 API，我会在单击链接后立即禁用该链接，并在获得成功响应后重新启用它，但 HTML5 下载属性对于我的用例来说非常漂亮，除了我不知道如何更仔细地检查这个过程。

标签： htmldownload

解决方案

只是一个想法，您可以保持 <a> 与现在相同，但将其隐藏，以便仅用于其功能，但不直接与用户交互。然后你可以有一个按钮或其他东西，你可以用它来“点击” <a> 当它被点击并禁用按钮，但没有办法知道下载何时完成，所以你可以设置一个超时或在对下载该项目需要多长时间进行一些测试之后。这是非常骇人听闻的，因为显然下载时间会根据用户的互联网速度而有很大差异。这可能看起来像这样：

const downloadBtn = document.getElementById('download-btn');

downloadBtn.addEventListener("click", function(event){
  event.preventDefault();

  // trigger download through hidden link
  document.getElementById('download-link').click();

  document.getItemById("btn").disabled = false;
  
  setTimeout(
      function(){ document.getItemById("btn").disabled = true; }, 3000);
}
<button id="download-btn">Download</button>

<a id="download-link" href="/api/admin_csv_dl" download="adminCSV.csv" hidden>Download CSV</a>

话虽如此，如果在下载期间禁用链接/按钮非常重要，我会选择完全以编程方式执行此操作。如果你走这条路，我会使用浏览器的downloadsapi 来研究一些东西。更多信息可以在这里找到。祝你好运！

推荐阅读