Question

我有一个Angular 7应用程序，该应用程序调用ASP.NET Web API函数，该函数以.xlsx Excel文件的形式将数据返回到Angular。

使用此代码，然后创建一个不可见的<a>标记，然后单击它以开始将该二进制文件下载到客户端：

this.reportService.createReport(this.reportOption,
    (data) => {
        const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });

        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        document.body.appendChild(a);

        a.setAttribute('style', 'display: none');
        a.href = url;
        a.download = fileName;
        a.click();

        window.URL.revokeObjectURL(url);
        a.remove();
    },
    (error: string) => {
        this.messsageService.showError(error);
    });

此代码可在Firefox和Chrome中完美运行-完全没有问题。

但是在MS Edge中，由于某种原因，下载尚未开始。我在Javascript控制台中没有看到任何错误，只是说“下载成功开始”-但是没有提示用户将文件保存到何处-而且文件也没有被静默下载到配置的默认下载目录中

有什么想法吗？其他人是否能通过Edge看到这一点，并找到了解决方案？

Answer 1

在IE / Microsoft Edge浏览器中，可以使用msSaveOrOpenBlob方法下载文件。请尝试如下修改您的代码：

//change to your format.
var blob = new Blob([byteArray], { type: 'application/pdf' });
//output file name
var fileName = "test.pdf";

//detect whether the browser is IE/Edge or another browser
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  //To IE or Edge browser, using msSaveorOpenBlob method to download file.
  window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
    //To another browser, create a tag to downlad file.
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    document.body.appendChild(a);
    a.setAttribute('style', 'display: none');
    a.href = url;
    a.download = fileName;
    a.click();

    window.URL.revokeObjectURL(url);
    a.remove();
}

Angular-在Edge中无法下载文件

1 个答案: