Angular 5 通过锚点下载文档在 IE 中不起作用

Question

我的网站有一些文档只有在登录后才显示为 "download-able"。所以当 anchor 元素被点击时，它需要附加 authorization header，然后 API returns blob。为了添加授权 header，我使用了将 anchor 元素上的 href 替换为 click 事件的解决方案。这是代码：

Html

<a class="{{ anchorClasses }}" (click)="!downloadDocument(path)" href="">
    <i *ngIf="iconClasses && iconClasses.length > 0" class="{{ iconClasses }}" aria-hidden="true"></i><span [innerHTML]="linkText"></span>
</a>

打字稿代码

downloadDocument(url: string) {
    this.appDataService.spinnerService.show();

    return this.anchorDocumentService.downloadDocument(url)
        .subscribe((result: any) => {
            this.downloadFileFromBlob(result, url);

            return false;
        }, (error: any) => {
            console.error(error);

            this.appDataService.spinnerService.hide();
            this.appDataService.routeToErrorPage(error);

            return false;
        });
}

正如您将在订阅函数成功回调中看到的，我立即调用了 "downloadFileFromBlob" 函数，这里是：

private downloadFileFromBlob(blob: any, url?: string) {
    console.log('DownloadLinkComponent | downloadFileFromBlob...');

    try {
        const anchorDownloadUrl = window.URL.createObjectURL(blob);
        const anchorDownload = document.createElement('a');

        document.body.appendChild(anchorDownload);

        anchorDownload.href = anchorDownloadUrl;

        anchorDownload.setAttribute('style', 'display: none;');
        anchorDownload.setAttribute('target', '_blank');

        if (url && url.length > 0) {
            anchorDownload.setAttribute('download', this.isDocumentService.getFilenameFromPath(url));
        }

        console.log('DownloadLinkComponent | downloadFileFromBlob | clicking the hidden download link...');
        anchorDownload.click();
        // anchorDownload.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));

        window.URL.revokeObjectURL(anchorDownloadUrl);
    } catch (error) {
        this.appDataService.routeToErrorPage(error);
    } finally {
        this.appDataService.spinnerService.hide();
    }
}

因此，在 chrome 中，这非常有效。但在 IE 中，它在这一行抛出错误：

anchorDownload.click();

在 IE 中，显示的错误页面显示：

The webpage cannot be displayed

 Most likely cause: •Some content or files on this webpage require a program that you don't have installed.

这是我获得添加身份验证的代码的地方header：

因此，在 chrome 中，当点击事件触发时，它将 blob 下载到我的本地文件系统，并且 url，也就是该文件的文件路径被设置为 href 用于 [隐藏] 锚点击事件。那么...为什么 IE 无法下载此文件？

Answer 1

我不确定这是否应该关闭，或者只是 link 答案...所以这里是 link 我找到的答案：

blob download not working in IE

只需两行代码即可解决此问题：

if (navigator.appVersion.toString().indexOf('.NET') > 0)
        window.navigator.msSaveBlob(blob, filename);
else
        const anchorDownloadUrl = window.URL.createObjectURL(blob);
        const anchorDownload = document.createElement('a');
        // ... the rest of the code in the 'downloadFileFromBlog' function

所以，快速检查一下我们是否在 IE 中运行，如果是，请调用保存功能。

Angular 5 通过锚点下载文档在 IE 中不起作用

Angular 5 download document via anchor not working in IE

javascript

anchor

authorization

angular

angular5