Angular - 下载文件在 Edge 中不起作用

Question

我有一个 Angular 7 应用程序，它调用一个 ASP.NET Web API 函数，该函数以.xlsxExcel 文件的形式将数据返回给 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();
}