angular2 下载保存文本数据

需求

要导出API提供的数据，保存到本地。

思路

1. 获取API数据。
2. 使用Blob转化为文件对象。
3. 创建一个a标签并加入dom，并设置相关参数，其中Blob会转化为链接。
4. 触发a标签的 click 事件，然后销毁a标签。

源码

Service.ts

  downloadService(): any {
      let link = `${RootUrl}/data/all`;
      return this.http.get(link)
            .map(res => new Blob([res.text()],{ type: 'application/json' }))
            .catch(this.handleError);
  }

Component.ts

  downloadComponent(): void {
    var link = document.createElement("a");
    this._listService.downloadService()
      .subscribe(data => {
          // Blob转化为链接
          link.setAttribute("href", window.URL.createObjectURL(data));
          link.setAttribute("download", 'filename.json');
          link.style.visibility = 'hidden';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      );
  }

参考链接

http://stackoverflow.com/questions/35138424/how-do-i-download-a-file-with-angular2

http://stackoverflow.com/questions/38793859/angular-2-downloading-a-file-corrupt-result