CODEWITHSUNDEEP
google-chromeangulartypescriptblob
playerone
playerone

Reputation: 1127

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>

Upvotes: 13

Views: 24452

Answers (3)

Bullsized
Bullsized

Reputation: 607

In my service I've created the following function that you can C/P:

  downloadBlobAsFile = (response: Blob, fileName: string, fileType: string) => {
    const fullFileName: string = fileName;
    const blob: Blob = new Blob([response], { type: fileType });
    const url: string = window.URL.createObjectURL(blob);
    const link: HTMLAnchorElement = document.createElement('a');

    link.href = url;
    link.download = fullFileName;
    link.click();

    document.body.appendChild(link);

    // Removes the anchor element from the DOM and releases the object URL after a very short delay (half a second),
    // allowing the download to start before cleanup
    setTimeout(() => {
      // Remove the link from the document
      document.body.removeChild(link);
      // Release the object URL
      window.URL.revokeObjectURL(url);
    }, 500);
  };

and then just call the function from the service with the proper parameters.

Upvotes: 0

abahet
abahet

Reputation: 10643

Here is the download method working on IE, chrome and firefox:

  downloadCsvFile(data, fileName) {
    const csvName = fileName +  '.csv';
    const blob = new Blob([data], {type: 'text/csv'});
    if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE
      window.navigator.msSaveOrOpenBlob(blob, csvName);
      window.navigator.msSaveOrOpenBlob(blob, csvName);
    } else { //Chrome & Firefox
      const a = document.createElement('a');
      const url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = csvName;
      a.click();
      window.URL.revokeObjectURL(url);
      a.remove();
    }
  }

Upvotes: 2

Poul Kruijt
Poul Kruijt

Reputation: 71961

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

Upvotes: 31

Related Questions