Question

我想做的是：

将新的iframe附加到正文并使用它下载文件。
下载文件后删除iframe ..

我阅读了几篇帖子并提出了这段代码：

let fileHref = baseLocation + '/excelexports/' + fileName;
var iframe = document.createElement('iframe');
iframe.style.display = "none";
iframe.src = fileHref;
iframe.onload = function() {
    this.parentNode.removeChild(this);    
};
document.body.appendChild(iframe);

问题是在下载文件后onload回调没有触发......

Answer 1

根本不需要使用iframe。只需重定向到下载网址即可。 url中的标头将阻止浏览器将其作为页面加载，因此不会破坏当前页面

let fileHref = baseLocation + '/excelexports/' + fileName;
window.location.href  = fileHref ;

Answer 2

您可以使用HTML5下载属性。 E.G <a href='{fileurl}' download>download</a> 或者如果你需要javascript引擎来做它。

let fileHref = baseLocation + '/excelexports/' + fileName;
var anchor = document.createElement('a');
anchor.setAttribute("download", true);
anchor.setAttribute("href", fileHref);
anchor.click();

如果您使用点击运行此javascript，您甚至可以通过该事件来帮助将您的下载识别为更具侵入性的弹出窗口阻止程序的用户操作。

someElem.addEventListener('click', function(evt){
    let fileHref = baseLocation + '/excelexports/' + fileName;
    var anchor = document.createElement('a');
    anchor.setAttribute("download", true);
    anchor.setAttribute("href", fileHref);
    anchor.dispatchEvent(evt);
});

源： https://www.w3schools.com/tags/att_a_download.asp

Javascript - 使用Iframe下载文件然后将其删除

2 个答案: