Question

在我的HTML5 + JS网站中，我通过使用一些标头值进行HTTP GET调用来调用Web服务。该调用返回一个pdf二进制文件。我的目标是向用户显示pdf。以下代码在chrome中效果很好，但在edge中效果不佳。在边缘，它抛出“访问被拒绝”错误。是否可以解决边缘问题？

我无法直接将url设置为对象数据或embed标签的src，因为Web服务要求显示特定的标头值。

fetch(someUrl,{headers:someHeaders})
.then(response=>{return response.blob();})
.then(blob=>{
    pdfObject = document.createElement('object');
    pdfObject.type = 'application/pdf';
    pdfObject.data = URL.createObjectURL(blob);
});

预期：显示pdf 实际：开发人员工具控制台中的“访问被拒绝”

Answer 1

过去已经多次回答了。这是处理Blob下载的函数。我在几个生产系统中使用了它。经过测试的浏览器单元包括IE9 +，Edge，Chrome，Firefox：

async function showBlobInBrowser(blob, fileName) {
    return new Promise((resolve, reject) => {
        try {
            if (navigator.msSaveOrOpenBlob) {
                navigator.msSaveOrOpenBlob(blob, fileName);
                resolve()
            } else if (window.navigator.msSaveBlob) {
                window.navigator.msSaveBlob(blob, fileName);
                resolve()
            } else {
                const url = (window.URL || window.webkitURL).createObjectURL(blob),
                    a = document.createElement("a")
                a.setAttribute("href", url)
                a.setAttribute("download", fileName)
                a.style.display = "none"
                document.body.appendChild(a)
                a.click()
                setTimeout(function () {
                    a.remove()
                    window.URL.revokeObjectURL(url)
                    resolve()
                }, 0)
            }
        } catch(ex) {
            reject(ex)
        }
    })
}

将响应blob作为边缘中的对象HTML元素数据获取

1 个答案: