Question

我可以在Chrome中使用AngularJS下载PDF，但这似乎不适用于最新的FireFox，Internet Explorer 11或Edge（假设它也不适用于IE10），我知道{{3 }}。如果有人有意见，不知道这是否是最好的垫片，但目前它似乎不起作用。我尝试使用响应类型blob和arraybuffer，以防万一有所不同，但事实并非如此。

所有这些都反驳了shim is needed for IE9指示使用Blob网址的内容。任何人都有这个在IE9及以上工作，以及最后几个版本的FF，并可以指出我做错了什么？

$http({
    url: '/api/v1/download',
    method: 'GET',
    responseType: 'blob' // or 'arraybuffer'
}).then(function (response) {

    // Use the Blob object to create an object URL to download the file
    var url = URL.createObjectURL(response.data);
    // var url = URL.createObjectURL(new Blob([response], {type: 'application/pdf'})); // arraybuffer version

    // Create an anchor to perform download, but don't append to the DOM
    anchor.href = downloadUrl;
    anchor.download = filename;
    anchor.target = '_blank';
    anchor.click();

    URL.revokeObjectURL(downloadUrl);            
    anchor = null;

}).catch(function (reason) {

    console.log('FAIL', reason);
});

更新

目前最好（唯一）的答案适用于IE10,11，Edge，FF，并继续与Chrome配合使用。如果任何人有另一个polyfill / shim / other / etc，IE9将无法使用此解决方案，并且Safari不支持下载属性，因此所选答案中的解决方案在SPA中不起作用，因为它只是重定向当前页面所以在这两种情况下我都离开了TODO存根。

这是对已发布回答的更新，在评论中添加了更多信息，供任何人使用或希望添加，以便IE9和Safari按预期工作：

    function performDownload(blob, filename) {

        // IE9 has no API for handling downloads using Blob objects, and doesn't support the download attribute
        if(isIE() == 9) {

            // TODO: polyfill/shim/other... change response type to?
        }
        // Only works for IE10 and up, including Edge
        else if (typeof window.navigator.msSaveBlob !== 'undefined') {

            // Provides a prompt to save the file to a location of users choice
            window.navigator.msSaveBlob(blob, filename);
        }
        // Browsers that adhere to current standards can implement downloads
        // using the Blob object with the download anchor attribute
        // ---
        // NOTE: Edge 13+ is compliant with both these standards, but Edge 12
        // does not support the download anchor attribute so all versions
        // have been grouped to use the propriety `msSaveBlob` method
        else {

            // Use the Blob object to create an object URL to download the file
            var URL = window.URL;
            var downloadUrl = URL.createObjectURL(blob);

            var anchor = document.createElement('a');

            if(angular.isDefined(anchor.download)) {

                anchor.href = downloadUrl;
                anchor.download = filename;
                anchor.target = '_blank';
                document.body.appendChild(anchor); // Required by Firefox
                anchor.click();

                // Release the existing object URL, and the anchor
                $timeout(function () {
                    URL.revokeObjectURL(downloadUrl);
                    document.body.removeChild(anchor);
                    anchor = null;
                }, 100);
            }
            else {

                // TODO: Safari does not support the download anchor attribute...
            }
        }
    }

Answer 1

我在IE11和Chrome中都成功使用了它：

function saveBlob(response, contentType, filename) {
    let blob = new Blob([response.arrayBuffer()], { type: contentType });
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
        // IE workaround
        window.navigator.msSaveBlob(blob, filename);
    } else {
        let URL = window.URL;
        let downloadUrl = URL.createObjectURL(blob);
        if (filename) {
            let a = document.createElement('a');
            if (typeof a.download === 'undefined') {
                window.location.href = downloadUrl;
            } else {
                a.href = downloadUrl;
                a.download = filename;
                document.body.appendChild(a);
                a.click();
            }
        } else {
            window.location.href = downloadUrl;
        }
        // cleanup
        setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); 
    }
}

Answer 2

尝试一下。它会检查浏览器并相应地保存文件

saveFile(response: any, fileName: string) {
    let browser = navigator.userAgent.toLowerCase();
        if(browser.indexOf('trident') == -1){
            let dataType = response.type;
            let binaryData = [];
            binaryData.push(response);
            let downloadLink = document.createElement('a');
            downloadLink.href = window.URL.createObjectURL(new Blob(binaryData, { type: dataType }));
            downloadLink.setAttribute('download', fileName);
            document.body.appendChild(downloadLink);
            downloadLink.click();
        }
        else{
            window.navigator.msSaveBlob(response, fileName);
        }
}

使用兼容跨浏览器的JavaScript下载PDF

2 个答案: