javascript - Chrome 在下载为 PDF 时阻止 Blob 对象

Question

我创建了一小段脚本，它调用 API 来获取 PDF 并将 responseType 作为 arraybuffer 发送。

使用它我创建了一个新的 Blob 并将类型设置为“application/pdf”

为了强制下载，我创建了一个 anchor 元素，将 blob 传递给它并单击它。

这在本地和我的测试服务器上的其他浏览器上运行良好，但在 Chrome 上我失败了——下载栏中没有文件。

PDF 绝对可用，因为我可以将 API 的 url 粘贴到选项卡中并查看它，并且原始 API 调用的响应会传递到 Blob。

示例代码

var fileName = 'dummyFilename-' + offerId + '.pdf';
var blob = new window.Blob([resData], { type: 'application/pdf' });

var anchorElement = document.createElement('a');
var url = window.URL.createObjectURL(blob);

document.body.appendChild(anchorElement);
anchorElement.id = 'anchorElement';
anchorElement.hidden = 'true';
anchorElement.href = url;

if (typeof anchorElement.download !== 'undefined') {
    anchorElement.download = fileName;
} else {
    anchorElement.target = '_blank';
}

anchorElement.click();

Answer 1

你们有像 uBlock Origin 这样的广告拦截器扩展吗？如果是这样，它可能会阻止弹出窗口/选项卡中的所有 blob URL。 Easylist 默认执行此操作:

https://github.com/easylist/easylist/commit/e3276b6ff9611e821d0e8ba7ac4dc336a4e3b765

在我的例子中，我为我的网站禁用了 uBlock Origin 并且它起作用了。