检测 HTML 锚标签下载选择答案

【问题标题】：Detect HTML anchor tag download selection检测 HTML 锚标签下载选择
【发布时间】：2021-07-15 11:28:39
【问题描述】：

我使用锚标记为我的用户提供一个选项，以将一些客户端生成的数据下载到文件中。我使用以下代码：

function GenerateTextFile (FileType, FileName, FileContents)
{
var data = new Blob ([FileContents], {type: 'text/plain'});
var url = window.URL.createObjectURL (data);
var link = document.createElement ("a");
link.download  = FileName + "." + FileType ;
link.href      = url ;
link.innerText = " Click here to download" ;
};

稍后我调用以下内容进行整理：

window.URL.revokeObjectURL (url);

请有人告诉我如何检测到用户点击了锚标记？我想删除或更改文本，以便下载不会被激活两次。

【问题讨论】：

标签： html download anchor

【解决方案1】：

function GenerateTextFile(FileType, FileName, FileContents) {
  var data = new Blob([FileContents], {
    type: 'text/plain'
  });
  var url = window.URL.createObjectURL(data);
  var link = document.createElement("a");
  link.download = FileName + "." + FileType;
  link.href = url;
  link.innerText = " Click here to download";
  link.id = Date.now();
  link.setAttribute("onclick", "removeDownload('" + link.id + "')");
  let links = document.getElementById("links");
  links.appendChild(link);
};

function removeDownload(id) {
  document.getElementById(id).remove();
}

<button onclick="GenerateTextFile('txt','test','lorem ipsum');">Create Dummy DL</button>

<div id="links"></div>

注意：在 sn-p 中无法下载文件。它虽然在沙箱之外工作。这使用a 元素的onclick 事件和动态id（纪元），然后只调用removeDownload 方法，该方法将通过其id 获取a 元素并将其删除。

【讨论】：

【解决方案2】：

您可以向链接添加点击侦听器。还是有什么你不想要的原因？

link.onclick = function(){console.log("link was clicked");}

【讨论】：

我只是想知道 onclick 函数是否会覆盖默认行为
不，它没有。除非您将其更改为 `link.onclick = function(event){event.preventDefault(); console.log("链接被点击");}