没有链接的打字稿 blob 文件名答案

【问题标题】：Typescript blob filename without link没有链接的打字稿 blob 文件名
【发布时间】：2017-08-31 07:12:46
【问题描述】：

如何在打字稿中为 blob 设置文件名？对于 IE，我可以轻松设置文件名，但对于 Chrome，这似乎是不可能的。基本上我需要类似于this solution 但带有打字稿的东西

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>

【问题讨论】：

您是否尝试将download 属性添加到您的button？
它不会与 hdownload 属性一起工作

标签： google-chrome angular typescript blob

【解决方案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);
}

【讨论】：

很好的答案，最后一行只有一个问题。我认为应该是objectUrl 而不是url
您可能希望为 removeChild 添加一个小的 Timeout 功能，否则某些浏览器（如 Edge）会在完成点击之前删除锚点
经过一天多的努力，终于有帮助了。谢谢！

【解决方案2】：

下面是在 IE、chrome 和 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();
    }
  }

【讨论】：