google-chromeangulartypescriptblob

Typescript blob filename without link


How to set file name for blob in typescript? For IE, I can setup file name easily but for Chrome it looks impossible. Basically I need something similar to this solution but with typescript

downloadFile(data: any) {
    var blob = new Blob([data], {type: 'text/csv'});
    let fileName = 'my-test.csv';

    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        //save file for IE
        window.navigator.msSaveOrOpenBlob(blob, fileName);
    } else {
        //save for other browsers: Chrome, Firefox

        var objectUrl = URL.createObjectURL(blob);
        window.open(objectUrl);
    }
}

this function is called from html UI/angular 2:

<button type="button" class="btn btn-success"
(click)="downloadFile('test')">Download <br /> Download </button>

Solution

  • For chrome (and firefox) you need to do a little work around with creating an <a> element and calling click:

    downloadFile(data: any): void {
        const blob: Blob = new Blob([data], {type: 'text/csv'});
        const fileName: string = 'my-test.csv';
        const objectUrl: string = URL.createObjectURL(blob);
        const a: HTMLAnchorElement = document.createElement('a') as HTMLAnchorElement;
    
        a.href = objectUrl;
        a.download = fileName;
        document.body.appendChild(a);
        a.click();        
    
        document.body.removeChild(a);
        URL.revokeObjectURL(objectUrl);
    }