【问题标题】:Disable download link (using HTML5 download attribute) until download completed禁用下载链接(使用 HTML5 下载属性)直到下载完成
【发布时间】:2020-10-09 01:11:54
【问题描述】:

我有一个网站,其中包含以下 HTML 链接:

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

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

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

【问题讨论】:

  • 这个文件有多大?您始终可以通过 Fetch API 下载它,然后链接到它的 Blob 副本。但是,当您执行此操作时,整个文件都适合内存。

标签: html download


【解决方案1】:

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

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>

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-01-22
    • 2020-09-06
    • 1970-01-01
    • 2017-08-08
    • 2014-12-30
    • 1970-01-01
    • 2017-11-15
    • 2012-07-24
    相关资源
    最近更新 更多