从IE11下载文件后加载pdf文件失败答案

【问题标题】：Failed to load pdf document after downloading the document from IE11从IE11下载文件后加载pdf文件失败
【发布时间】：2021-01-20 20:16:41
【问题描述】：

我有一个 ajax 调用，我正在调用 JSReport 并下载 pdf 文档。在 chrome 和其他浏览器中，它可以正常工作。文件已下载，我可以打开它。但是在IE11中，文件是下载的，但是如果我想打开pdf文件，它总是显示加载pdf文件失败。我在 IE11 控制台中调试了代码，但没有给出任何错误。这是我的代码，

$.ajax({
                url: 'my api url',
                headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
                type: 'POST',
                data: JSON.stringify(selectedIds),
                success: function (data) {
                    var a = document.createElement('a');
                    var isIE = false || !!document.documentMode;
                    
                    if (!isIE) {
                        // This part is working properly
                        for (var i = 0; i < data.length; i++) {
                            a.href = "data:application/octet-stream;base64," + data[i];
                            a.target = '_blank';
                            a.download = 'report.pdf';
                            a.click();
                        }
                    } else {
                        // This part is for IE11 browser where I have problem to load the document after download
                        for (var i = 0; i < data.length; i++) {
                            var file = new Blob([data[i]], {
                                type: 'application/octet-stream'
                            });
                            window.navigator.msSaveOrOpenBlob(file, 'report.pdf');
                        }
                    }
                    
                },
                fail: function (jqXHR, textStatus) {
                    alert("Request failed: " + textStatus);
                }
            });

【问题讨论】：

我尝试使用虚拟值测试您的示例代码。在 Chrome 中下载文件时出现网络错误，并且在 IE 中出现 InvalidStateError。如果可能，您可以尝试共享您在代码中使用的参数的虚拟值吗？它可以帮助我们准确地重现问题。感谢您的理解。
感谢@Deepak-MSFT 的评论。我从 API 调用中获得的虚拟值是 base64 字符串格式。由于篇幅太长，我不能在这里发布。您还需要其他信息吗？

标签： javascript internet-explorer-11 jsreport

【解决方案1】：

终于，我找到了解决方案！我实际上需要将 base64 字符串数据转换为 Blob。然后我们就可以下载了。以前，它没有正确转换。这就是文件被下载但由于损坏而无法加载的原因。下面是我的代码，

$.ajax({
                url: 'my api url',
                headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
                type: 'POST',
                data: JSON.stringify(selectedIds),
                success: function (data) {
                    var a = document.createElement('a');
                    var isIE = false || !!document.documentMode;
                    
                    if (!isIE) {
                        // This part is working properly
                        for (var i = 0; i < data.length; i++) {
                            a.href = "data:application/octet-stream;base64," + data[i];
                            a.target = '_blank';
                            a.download = 'report.pdf';
                            a.click();
                        }
                    } else {
                        for (var i = 0; i < data.length; i++) {
                            var base64Data = data[i];
                            var fileName = 'report.pdf';
                            var byteCharacters = atob(base64Data);

                            var byteNumbers = new Array(byteCharacters.length);

                            for (var j = 0; j < byteCharacters.length; j++) {
                                byteNumbers[j] = byteCharacters.charCodeAt(j);
                            }

                            var byteArray = new Uint8Array(byteNumbers);
                            var blob = new Blob([byteArray], { type: 'application/pdf' });

                            window.navigator.msSaveOrOpenBlob(blob, fileName);                            
                        }
                    }
                    
                },
                fail: function (jqXHR, textStatus) {
                    alert("Request failed: " + textStatus);
                }
            });

【讨论】：