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