如何在没有弹出窗口阻止程序的情况下将 PDF 下载到新选项卡/窗口？答案

【问题标题】：How to download a PDF to a new tab/window without popup blocker?如何在没有弹出窗口阻止程序的情况下将 PDF 下载到新选项卡/窗口？
【发布时间】：2016-09-09 16:37:03
【问题描述】：

我有以下服务调用来从服务器下载文件。我目前拥有它，以便在新选项卡/窗口中打开 PDF，并下载任何其他文档类型。

我现在遇到的问题是 PDF 被弹出窗口阻止程序阻止。有没有办法解决这个问题？

  return formService.getForm(params)
        .$promise
        .then(response => {
            var blob = new Blob([response.data], {
                type: response.responseType
            });
            var fileUrl = (window.URL || window.webkitURL).createObjectURL(blob);
            if (response.responseType === 'application/pdf') {
                window.open(fileUrl);
            } else {
                var a = document.createElement("a");
                document.body.appendChild(a);
                a.style = "display: none"
                a.href = fileUrl;
                a.download = formName;
                a.target = "_blank";
                a.click();
                window.URL.revokeObjectURL(fileUrl);
            }
        })
        .catch(error => {
            console.error(`Error downloading form '${formName}' `, error);
        });

【问题讨论】：

您正在强制点击事件，因此弹出窗口拦截器会提示这不是用户执行的操作。让用户执行打开窗口的点击操作并再次测试。

标签： javascript html angularjs popup-blocker

【解决方案1】：

我通过另一个堆栈溢出帖子找到了我的问题的答案。

window.open popup getting blocked during click event

基本上，我在进行服务调用之前调用var newWindow = window.open();，然后在成功回调中调用newWindow.location = fileUrl。

【讨论】：

非常好的解决方案，我通过超时关闭新标签对其进行了改进： setTimeout(function(){ newWindow.close(); }, 500);下载后（根据我的经验，如果没有超时，新标签页会在下载开始之前关闭）。