angular2 下载保存文本数据

原文链接：http://blog.csdn.net/holdlg/article/details/54926136

需求

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

思路

获取API数据。

使用Blob转化为文件对象。

创建一个a标签并加入dom，并设置相关参数，其中Blob会转化为链接。

触发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