在 Angular 应用程序中将 json 文件（从 json-服务器）下载为 txt 或 json 或 csv 文件

Question

我在我的 Angular 应用程序中安装了 json-server，它使我能够通过伪造的 json API 将表格（由用户填写）保存到json 文件：

{
  "extracts": [
    {
      "contentName": "xxx",
      "contentType": "xxx",
      "contentToStore": "xxx",
      "id": 1
    }
  ]
}

我也可以在 http://localhost:3000/extracts

上看到结果

在我的 html 模板中，我的表单已提交：

<form #postForm="ngForm" (ngSubmit)="onSubmitExtractions(postForm.value)">

在对应的组件中，我写了这段代码：

onSubmitExtractions(postData: Post) {
    
    this
      .dbService
      .submitExtractions(postData)
      .subscribe(
        postData => {
          this.jsonPosts.push(postData);
        }
    );
    
    this
      .dbService
      .downloadExtractions(postData);
}

第一个片段写入 json 文件，在服务脚本中使用此代码：

submitExtractions(post: Post): Observable<Post> {
    return this.httpClient.post<Post>(this.apiUrl, post, httpOptions);
}

这工作正常，我在 json 文件（假 json 服务器数据库）中得到结果，第二个片段应该下载这个文件，其服务脚本中的代码是这样的：

downloadExtractions(post: Post) {

    const blob = new Blob([JSON.stringify(post, null, 2)], { type: 'application/json' });

    if (blob) {
      this.downloaded = 'The blob contains ' + blob.size + ' byte!';
    } else {
      this.downloaded = 'The download failed!';
    }
}

为了实际下载 json 内容，我在这些代码中缺少什么？如何将此内容下载为 csv 或 json 甚至 text 文件？

Answer 1

请尝试此解决方案。它使用相同的 blob，只是一些常量数据。

在html

<a [href]="fileUrl" download="file.txt">DownloadFile</a>

在component.ts

export class AppComponent implements OnInit {
  name = 'Angular 5';
  fileUrl;
  constructor(private sanitizer: DomSanitizer) {  }
  ngOnInit() {
    const data = 'some text';
    const blob = new Blob([data], { type: 'application/octet-stream' });

    this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));
  }

}

参考请访问：

https://stackblitz.com/edit/angular-blob-file-download-text-file?file=app%2Fapp.component.ts

在 Angular 应用程序中将 json 文件（从 json-服务器）下载为 txt 或 json 或 csv 文件

Downloading a json file (from json-server) as a txt or json or csv file, in an Angular app

html

json

typescript

json-server

angular