导出 pdf 适用于除 Internet Explorer 11 以外的所有浏览器，角度为 5

Question

我尝试在所有网络浏览器（chrome、FireFox）上测试“导出 PDF”角度，它可以正常工作，但在 Internet Explorer 11 上除外

 //******************************************".html"******************************************//
     <button title="{{'purchase request'| translate}} PDF" mat-button class="header-button" 
    (click)="downloadPdf(prPurchaseRequest)">
     <mat-icon>cloud_download</mat-icon>{{'purchase request'|translate}} PDF
    </button>
//******************************************".ts"******************************************//
 /**
 *
 * Download PDF prPurchaseRequest
 */
downloadPdf(prPurchaseRequest) {
    this.spinnerstate = true;
    this.extraService.getCollection('api/pr-purchase-requests/generate_pdf/' + 
prPurchaseRequest.id).subscribe((response) => {
        setTimeout(() => { this.spinnerstate = false; }, 2000);
        const name = prPurchaseRequest.reference + '_purchase-request.pdf';
        const linkSource = 'data:application/pdf;base64,' + response.data;
        const downloadLink = document.createElement('a');

        downloadLink.href = linkSource;
        downloadLink.download = name;
        downloadLink.click();
    });
}

//****************************** Internet Explorer 中的错误控制台 ********** //

Answer 1

导出正常，但 pdf 已损坏：

downloadPdf(prPurchaseRequest) {
    this.spinnerstate = true;
    this.extraService.getCollection('api/pr-purchase-requests/generate_pdf/' + prPurchaseRequest.id).subscribe((response) => {
        setTimeout(() => { this.spinnerstate = false; }, 2000);

        const name = prPurchaseRequest.reference + '_purchase-request.pdf';
        const linkSource = 'data:application/pdf;base64,' + response.data;

        if(window.navigator.msSaveBlob) {

              const blob = new Blob([linkSource], {type: "application/pdf;base64," });
              navigator.msSaveBlob(blob,name);
        }
        else{
            const downloadLink = document.createElement('a');
            downloadLink.href = linkSource;
            downloadLink.download = name;
            downloadLink.click();
        }
    });
}

Answer 2

其实IE的控制台没有错误。只有两个警告，没关系。点击链接无法下载PDF，因为IE不支持download attribute。

你可以use Blob and msSaveBlob to save files in IE。 msSaveBlob 为用户提供了一个保存按钮，用户可以点击它来保存PDF文件。

IE 中的示例用法：

if(window.navigator.msSaveBlob) {
    //IE11
    window.navigator.msSaveBlob(blobData, fileName); 
}
else{
    //Other browsers
    //your function to download pdf
}

更多信息，您也可以参考this thread。

----------------------------------- - - - - - - - - -编辑 - - - - - - - - - - - - - - - - --------------------------

你得到的linkSource 是base64 字符串而不是blob 数据。您需要将 base64 转换为 blob，然后使用 msSaveBlob 函数。

base64转blob的详细信息，请参考this thread。