在 Angular 应用程序中将 json 文件（从 json-server）下载为 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);
}

第一个 sn -p 写入 json 文件，在服务脚本中有这段代码：

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

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

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