Typescriptでblobのファイル名を設定するにはどうすればよいですか? IEの場合、ファイル名を簡単に設定できますが、Chromeの場合、不可能に見えます。基本的に、 このソリューション に似たものが必要ですが、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);
}
}
この関数はhtmlUI/angular2から呼び出されます。
<button type="button" class="btn btn-success"
(click)="downloadFile('test')">Download <br /> Download </button>
chrome(およびfirefox)の場合、<a>
要素を作成して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);
}
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();
}
}