Export pdf works on all browsers except internet explorer 11 in angular 5

Question

I tried to test "Export PDF" angular on all web browsers (chrome, FireFox) it works correctly except on 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();
    });
}

//******************************Error Console in internet explorer **********//

Yu Zhou · Answer 1 · 2020-07-03T07:24:19.947

0

Actually there's no error in console in IE. There're only two warnings and that's OK. PDF can't be downloaded when click the link because IE doesn't support download attribute.

You could use Blob and msSaveBlob to save files in IE. msSaveBlob provides a Save button to the user and the user can click it to save the PDF file.

Sample usage in IE:

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

For more information, you could also refer to this thread.

----------------------------------------------------------------Edit-----------------------------------------------------------

The linkSource you get is base64 string not blob data. You need to convert the base64 to blob then use the msSaveBlob function.

For the detailed information about converting base64 to blob, please refer to this thread.

edited Jul 03 '20 at 07:24

answered Jul 02 '20 at 03:24

Yu Zhou

11,532
1
8
22

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) { window.navigator.msSaveBlob(linkSource,name); } else{const downloadLink = document.createElement('a'); downloadLink.href = linkSource;downloadLink.download =name;downloadLink.click();}});} – wiem khardani Jul 02 '20 at 09:20
The problem still exists when I try this example – wiem khardani Jul 02 '20 at 09:20

score 0 · Answer 2 · answered Jul 02 '20 at 10:34

Export works correctly but pdf is damaged :

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

Export pdf works on all browsers except internet explorer 11 in angular 5

2 Answers2