Question

在这里我想知道如何创建文本文件或json文件，并使用要填充的动态数据下载它。

以下是我的

服务代码

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

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

      return result.json();

    });
  }

component.ts

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

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

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

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

Answer 1

它不必使用任何软件包，请尝试

https://stackblitz.com/edit/httpsstackoverflowcomquestions51806464how-to-create-and-downloa?file=src/app/app.component.ts

@Component({
  ...
})
export class AppComponent {
  private setting = {
    element: {
      dynamicDownload: null as HTMLElement
    }
  }


  fakeValidateUserData() {
    return of({
      userDate1: 1,
      userData2: 2
    });
  }

  //

  
  dynamicDownloadTxt() {
    this.fakeValidateUserData().subscribe((res) => {
      this.dyanmicDownloadByHtmlTag({
        fileName: 'My Report',
        text: JSON.stringify(res)
      });
    });

  }

  dynamicDownloadJson() {
    this.fakeValidateUserData().subscribe((res) => {
      this.dyanmicDownloadByHtmlTag({
        fileName: 'My Report.json',
        text: JSON.stringify(res)
      });
    });
  }
  
  

  private dyanmicDownloadByHtmlTag(arg: {
    fileName: string,
    text: string
  }) {
    if (!this.setting.element.dynamicDownload) {
      this.setting.element.dynamicDownload = document.createElement('a');
    }
    const element = 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 event = new MouseEvent("click");
    element.dispatchEvent(event);
  }
}

<a (click)="dynamicDownloadTxt()" >download Txt</a>
<a (click)="dynamicDownloadJson()" >download JSON</a>

Answer 2

首先，有一个库可供我们用来保存文件。我刚刚用FileSaver进行了测试，它似乎可以正常工作，因此这似乎是一个不错的起点。

第二，配置HTTP请求以返回Blob。使用HttpClient，我们可以轻松做到：

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

最后，在订阅中保存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")
      })

第二个选项是文件名。

Here is StackBlitz demo

如果要查看它下载文件，只需取消注释saveAs行。

Answer 3

您可以这样做：

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);

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

3 个答案: