Fatal编程技术网
  • javascript/
  • Javascript Native.click（）不会触发Chrome 57中的Blob下载

Javascript Native.click（）不会触发Chrome 57中的Blob下载

javascript html google-chrome

Javascript Native.click（）不会触发Chrome 57中的Blob下载,javascript,html,google-chrome,dom-events,Javascript,Html,Google Chrome,Dom Events,一段客户端Blob保存代码突然在Google Chrome中停止工作。同样的代码在Firefox中仍然有效。除其他外，该代码与中提供的代码几乎相同 var downloadLink = document.createElement("a"); var url = URL.createObjectURL(new Blob(["\ufeff", rows])); downloadLink.href = url; downloadLink.download = filename; document.

一段客户端Blob保存代码突然在Google Chrome中停止工作。同样的代码在Firefox中仍然有效。除其他外，该代码与中提供的代码几乎相同

var downloadLink = document.createElement("a");
var url = URL.createObjectURL(new Blob(["\ufeff", rows]));
downloadLink.href = url;
downloadLink.download = filename;

document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
在
上设置断点。单击（）。我确实发现在
setTimeout
中包装
.click（）
确实允许它成功，但前提是超时足够长


var downloadLink = document.createElement("a");
var url = URL.createObjectURL(new Blob(["\ufeff", rows]));
downloadLink.href = url;
downloadLink.download = filename;

document.body.appendChild(downloadLink);
setTimeout(function() {
    downloadLink.click();
    document.body.removeChild(downloadLink);
}, duration);


在哪里

我不确定问题是从版本57开始的，但我正在寻找关于如何改进Blob下载而不诉诸
setTimeout
hack的任何信息或建议

**编辑**


我应该很清楚，Blob下载是由用户启动的按钮点击触发的，并且不是一段在页面加载时无条件运行的代码。
如果是计时问题，则文档可能尚未完成加载（因此设置足够长的超时时间允许加载）。相反，请尝试附加到您知道文档已完全加载的事件


var downloadLink = document.createElement("a");
var url = URL.createObjectURL(new Blob(["\ufeff", rows]));
downloadLink.href = url;
downloadLink.download = filename;

document.body.appendChild(downloadLink);
document.onload = function() {
    downloadLink.click();
    document.body.removeChild(downloadLink);
};



注意您提到的示例中的代码之所以有效，是因为它是一个用户触发的事件（提交表单）。
我使用的是57，下面的代码适用于我。您能否确认它是否也适用于您，以确定它是与此代码有关还是与页面中的其他内容有关


<html>
<head>
<script>
    function download(filename, text) {
      var element = document.createElement('a');          
      var url = URL.createObjectURL(new Blob(['\ufeff', text]));

      element.id = 'downloadLink';
      element.href = url;
      element.download = filename;

      document.body.appendChild(element);

      var downloadLink = document.getElementById('downloadLink');
      downloadLink.click();

      document.body.removeChild(downloadLink);
    }
</script>
</head>
<body>
    <button onclick="download('test.txt', 'Hello this is a test')">Click Me</button>
</body>
</html>




函数下载（文件名、文本）{
var-element=document.createElement（'a'）；
var url=url.createObjectURL（新Blob（['\ufeff'，text]）；
element.id='downloadLink'；
element.href=url；
element.download=文件名；
document.body.appendChild（元素）；
var downloadLink=document.getElementById（'downloadLink'）；
downloadLink.click（）；
document.body.removeChild（下载链接）；
}
点击我

由于使用调用
FileSaver，js
saveAs
函数替换了提供的下载代码，我决定查看FileSave代码，看看它与我的实现有什么不同

核心区别在于文件保护程序创建了一个锚节点，但没有将其添加到DOM中。删除一些无关的代码后，我将问题归结为
appendChild
调用

工作代码


var downloadLink = document.createElement("a");
var url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = filename;

// document.body.appendChild(downloadLink);
downloadLink.click();



删除注释行会导致代码再次失败。
这是有效的。所以很明显，一些更“有趣”的事情正在发生。老实说，我不知道
setTimeout
如何允许它工作，因为在链接上触发单击事件之前，链接将从文档中删除，而其他答案似乎表明需要将其附加到文档中才能工作。这是因为我有一个复制/粘贴错误。removeChild位于回调函数中。代码已更新。为了防止作用域出现奇怪的情况，请尝试像上面那样添加id属性，然后在调用它之前通过id检索它。将所有这些都从
setTimeout
中删除。看我的编辑，运气不好。如果我取出
removeChild
调用并在控制台中查找定位点并手动执行
click（）
，例如
document.getElementById（'downloadLink'）。单击（）
一切正常。通过调用我手头的FileSaver 1.1.2副本来替换上面的代码，可以按预期执行下载。

var downloadLink = document.createElement("a");
var url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = filename;

// document.body.appendChild(downloadLink);
downloadLink.click();