google-chrome - 没有链接的 Typescript blob 文件名

Question

如何在 typescript 中为 blob 设置文件名？对于 IE，我可以很容易地设置文件名，但对于 Chrome，它看起来是不可能的。基本上我需要类似于 this solution 的东西但是用 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);
    }
}

此函数从 html UI/angular 2 调用:

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

Answer 1

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