Question

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

使用这个我创建一个新的Blob并将类型设置为＆＃39; application / pdf＆＃39;

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

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

PDF绝对可用，因为我可以将API粘贴到选项卡中并查看它，并将原始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，并且可以正常工作。

Answer 2

迫使这总是有点hacky ......：

如果您点击的HTML元素是执行该功能的链接，您可能想尝试添加download属性：

<a href="path/to/your/file.pdf" download>Download PDF</a>

如果您愿意，可以重命名：

<a href="path/to/your/file.pdf" download="downloaded-pdf-name.pdf">Download PDF</a>

如果您正在使用该解决方案在download属性不起作用的其他浏览器中使用该解决方案，则您的点击事件处理程序应如下所示：

document.getElementById('#download-pdf').onclick = function (event) {
    if (!"download" in document.createElement("a")) {
        // Download is NOT supported, the browser is probably not Chrome
        // You don't want the native behaviour, which will probably open
        // the PDF in another tab, so:
        event.preventDefault();

        // TODO: Adapt your code to execute from here...
    }
}

但是，download检查可能无法在Firefox中使用。请在此处查看答案中的评论：How to detect support for the HTML5 "download" attribute?

如果您有此选项，我建议您在HTTP响应标题中设置Content-Disposition = 'attachment; filename=downloaded-pdf-name.pdf' 。检查here以查看在不同后端执行此操作的具体方法。

Answer 3

你试过这个吗？（没有创建元素）...我希望它有所帮助

var fileName = 'dummyFilename-' + offerId + '.pdf';
var blob = new window.Blob([resData], { type: 'application/pdf' });
// Parse blob object to base64 to prevent chrome blocking:
var reader = new FileReader();
reader.readAsDataURL(blob); 
reader.onloadend = function() {
    base64data = reader.result;
    // For IE:
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(base64data);  
    } // For webkit
    else {
        var objectUrl = URL.createObjectURL(base64data);
        window.open(objectUrl);  
    }
}

以PDF格式下载时，Chrome会阻止Blob对象

3 个答案: