时间戳

首页 > 解决方案 > 在 Angular 应用程序中将 json 文件（从 json-server）下载为 txt 或 json 或 csv 文件

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

问题描述

我已经json-server在我的 Angular 应用程序中安装了它，它使我能够通过假 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甚至文本文件？

标签： htmljsonangulartypescriptjson-server

解决方案

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

在 HTML 中

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

在组件.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

推荐阅读