<a> 上的下载属性不起作用（不是跨域）答案

【问题标题】：download attribute on <a> not working (NOT cross-domain)<a> 上的下载属性不起作用（不是跨域）
【发布时间】：2022-04-20 23:51:33
【问题描述】：

观察以下代码：

let cv = document.createElement('canvas');
cv.toBlob(blob => {
    let a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'test.jpg';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}, 'image/jpeg', 1);

如果我在浏览器的新选项卡上打开控制台并粘贴它，它将按预期下载一个名为 test.jpg 的文件。我也在各种随机网站（一些在 HTTPS 上，一些在 HTTP 上）上完成了此操作，并且它在任何地方都有效。 但是，如果我在自己的网站上尝试此操作，Chrome 会在标签中加载图片而不是下载它。

我知道 download 属性不适用于跨域 URL，但正如您所见，这是同一域上的 blob: URL。此行为适用于我的测试环境（在 localhost:8585 上运行）和我的实时网站。

现在，我过去读到浏览器有时将localhost 视为跨域，因为它没有以有效的 TLD 结尾，因此不是有效的域名（这可以解释测试中的错误环境）。我的现场网站反过来有一个.app TLD，它是最近才引入的——所以，我能想到的唯一解释是浏览器可能还没有将.app 域识别为有效，因此跨域行为。

谁能证实我的怀疑，或提供解决方案？

【问题讨论】：

在 Chrome V68.0.3440.75 上可以正常工作
@gaetanoM 在本地主机站点上？下载本身在 Chrome 中也适用于我，只是不是在所有来源上。
在本地主机站点 (localhost:63342/...../file.html) 上是。因此，我不知道在哪里寻找....根据您的问题，我将您的代码复制到控制台的新页面中。如果您有其他信息，请告诉我。谢谢

标签： javascript html cross-domain

【解决方案1】：

我遇到了同样的问题，但它只影响我的实时站点，而不影响开发/本地主机环境。我无法确切地弄清楚为什么，但它在不同的浏览器中似乎是一致的，这让我觉得某处的配置有所不同。

但是，通过查看适用于我的网站的 download.js 中的代码，我确实找到了解决方案。

看来关键是在锚的点击事件中添加一个 stopPropagation() 调用。

在将新元素附加到 document.body 之前添加此内容：

a.addEventListener('click', function(e) {
    e.stopPropagation();
    this.removeEventListener('click', arguments.callee);
});

【讨论】：