如何使用angular 2+创建和下载包含动态内容的文本/Json文件；

在这里，我想知道如何创建一个文本文件或json文件，并下载其中包含将要填充的动态数据

下面是我的

服务代码

  validateUserData(userId) {
    var headers = new Headers();

    return this.http.get(`${this.baseUrl}/Users?userId=`+userId,{headers: headers}).map(result => {

      return result.json();

    });
  }

组件。ts

this.service.validateUserData(userId).subscribe( res => {

       console.log(res);    
       new Angular2Txt(res, 'My Report');
     });

在这里，我想将响应发送到一个文本文件或json文件，我必须创建该文件，以便用户能够下载我该怎么做

---

我尝试了上面的软件包，但我只能下载空文件

它不需要使用任何软件包，请尝试此

@组件({
...
})
导出类AppComponent{
私人设置={
要素：{
dynamicDownload:作为HtmleElement为null
}
}
fakeValidateUserData（）{
归还({
userDate1:1，
用户数据2:2
});
}
//
dynamicDownloadTxt（）{
this.fakeValidateUserData（）.subscribe（（res）=>{
this.dyanmic通过HTMLTAG下载({
文件名：“我的报告”，
文本：JSON.stringify（res）
});
});
}
dynamicDownloadJson（）{
this.fakeValidateUserData（）.subscribe（（res）=>{
this.dyanmic通过HTMLTAG下载({
文件名：“My Report.json”，
文本：JSON.stringify（res）
});
});
}
私有动态下载按HTMLTAG（参数：{
文件名：string，
文本：字符串
}) {
如果（！this.setting.element.dynamicDownload）{
this.setting.element.dynamicDownload=document.createElement（'a'）；
}
常量元素=this.setting.element.dynamicDownload；
const fileType=arg.fileName.indexOf（'.json'）>-1？'text/json'：'text/plain'；
element.setAttribute（'href'，'data:${fileType}；charset=utf-8，${encodeURIComponent（arg.text）}`）；
element.setAttribute（'download'，arg.fileName）；
var事件=新建鼠标事件（“单击”）；
元素。dispatchEvent（事件）；
}
}

下载Txt
下载JSON首先，我们可以使用一个库来保存文件。我刚刚测试了它，它似乎很有效，所以这似乎是一个好的开始

其次，配置HTTP请求以返回Blob。使用
HttpClient
，我们可以简单地执行以下操作：

let url = "https://jsonplaceholder.typicode.com/todos/1";
this.http.get(url, {responseType: 'blob'})

最后，在subscribe中保存blob。使用我前面提到的
npm
包，可以这样做：

import { saveAs } from 'file-saver/FileSaver';

// ...

    let url = "https://jsonplaceholder.typicode.com/todos/1";
    this.http.get(url, {responseType: 'blob'})
      .subscribe((res) => {
        console.log(res)
        saveAs(res, "myfile.json")
      })

第二个选项是文件名


如果您想查看
saveAs
行，只需取消注释即可下载文件。
您可以这样做：

let res = "Text to save in a text file";
const blob = new Blob([res], { type: 'text/csv' });
const url = window.URL.createObjectURL(blob);
window.open(url);

无需通过以下方式发送GET请求的
内容类型
标题是的，我知道已对其进行了编辑，并针对该问题提供了任何解决方案？您使用的是哪个版本的Angular？另外，您使用的是Http还是HttpClient？使用angular 6，但仅当它从angular 4升级到angular 6时才使用Http，您可能会发现使用
HttpClient
会更容易，因为很容易将其配置为返回
Blob
。我之前采用的这种方法是我在锚标记中创建按钮的问题（单击）=“数据下载（id）”/>单击锚定标记后，必须调用服务并下载数据。我更新了它；在服务获得数据后，您可以调用
dynamicDownload
。我的意思是，您在元素右侧创建了锚定标记，在模板中使用了button元素，在我的应用程序中，我使用tag as button而不是button so this也可以适用于此，y更新的按钮标记也可以使用anchor button I将按钮更改为anchors，但我认为这与您要使用的HtmlElement无关。在我的示例中，在调用ValidateUserDate方法后，您只需调用dynamicDownloadJson方法。当JSON非常大时，我会收到一个网络错误使用Chrome下载。在json情况下，它会打开一个新选项卡。知道如何下载json吗？@HardikPatel我不知道。对我来说，在Chrome中，它会很短地打开一个新选项卡，然后选项卡消失，文件会自动下载。这取决于你的浏览器设置吗？