如何打开网址并下载而不被阻止

Question

我有这样的事情：

<a 
  onClick={e => { getDownloadLink()
                     .then(url => window.open(url)) }}>Download</a>

getDownloadLink方法必须首先POST获取网址，然后由window.open(url)触发下载，但我发现浏览器将阻止window.open行为。我怎么能防止这种情况？

我在stackoverflow中看到了很多类似的问题，但我仍然没有找到解决问题的方法。我发现aws s3页面做了类似的事情，页面不会被浏览器阻止。所以...我认为必须有一些方法来处理这个问题。

Answer 1

不要使用window.open，只需让浏览器执行它已经知道的HTML操作：构建链接锚点，然后单击它。

// create an temporary, invisible link and open it in a new tab
function openURL(url) {
  var a = document.createElement("a");
  a.setAttribute("target", "_blank");
  a.href = url;
  a.style.display = "none";
  // you can't click a link unless it's part of the document:
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

通过这种方式，您告诉浏览器只是“以正常方式打开链接”，并且很乐意这样做，而不是阻止有问题的API，这些API具有用于弹出窗口和其他可疑目的的历史记录。