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

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();
}