Angular2 导出/下载 json 文件答案

【问题标题】：Angular2 to export/download json fileAngular2 导出/下载 json 文件
【发布时间】：2017-07-10 16:23:19
【问题描述】：

我正在使用 Angular 2。我想提供下载 JSON 文件的功能。

就像我有 res = {bar : foo} 的响应，然后我想创建一个包含此响应的 json 文件，该响应可以在按钮/锚点单击时下载。

任何帮助将不胜感激。

【问题讨论】：

创建一个数据 URL 并将其分配给 <a [href]="myDataUrl"> developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/…。您可以查找任何解释它的 JavaScript 答案，在 Angular 中也是如此。

标签： javascript json angular download export

【解决方案1】：

这比预期的要简单。

constructor(private sanitizer: DomSanitizer){}

    generateDownloadJsonUri() {
        var theJSON = JSON.stringify(this.resJsonResponse);
        var uri = this.sanitizer.bypassSecurityTrustUrl("data:text/json;charset=UTF-8," + encodeURIComponent(theJSON));
        this.downloadJsonHref = uri;
    }

在模板中包含

<a class="btn btn-clear" title="Download JSON" [href]="downloadJsonHref" download="download.json"></a>

【讨论】：

如何或何时调用 generateDownloadJsonUri()
我在构造函数上使用过，因为我已经准备好了this.resJsonResponse。您应该在准备好 Json 响应后调用它。
它为我下载 html 文件，而不是 json 数据
也许你应该尝试使用 Blob。
我没有将下载属性添加到并且正在努力找出它为什么不起作用。需要！

【解决方案2】：

纯 JavaScript 可以胜任。

downloadJson(myJson){
    var sJson = JSON.stringify(myJson);
    var element = document.createElement('a');
    element.setAttribute('href', "data:text/json;charset=UTF-8," + encodeURIComponent(sJson));
    element.setAttribute('download', "primer-server-task.json");
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click(); // simulate click
    document.body.removeChild(element);
}

【讨论】：

【解决方案3】：

当我的 json 太大时我遇到了一些问题，我在 Ankur Akvaliya 答案中添加了一个 Blob 对象，它可以工作！！

generateDownloadJsonUri() {
    let theJSON = JSON.stringify(this.resJsonResponse);
    let blob = new Blob([theJSON], { type: 'text/json' });
    let url= window.URL.createObjectURL(blob);
    let uri:SafeUrl = this.sanitizer.bypassSecurityTrustUrl(url);
    this.downloadJsonHref = uri;
}

【讨论】：

【解决方案4】：

您可以使用 DomSanitizer： https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

需要导入声明：

import {enter code here DomSanitizer, SafeResourceUrl, SafeUrl} from '@angular/platform-browser';
constructor(private sanitizer: DomSanitizer){}

generateDownloadJsonUri() {
    var theJSON = JSON.stringify(this.resJsonResponse);
    var uri = this.sanitizer.bypassSecurityTrustUrl("data:text/json;charset=UTF-8," + encodeURIComponent(theJSON));
    this.downloadJsonHref = uri;
}

【讨论】：

请编辑您的答案以包含一些解释。仅代码的答案对教育未来的 SO 读者几乎没有作用。您的答案因质量低劣而在审核队列中。

【解决方案5】：

您可以使用DomSanitizer 中的bypassSecurityTrustUrl() 方法执行此操作。

app.component.ts

export class AppComponent {
  downloadUrl;
  filename = "";
  constructor(private sanitizer: DomSanitizer) {
    this.generateUrl();
  }

  generateUrl() {
    var res = { appname: "ABCD", appid: 1234 };
    this.filename = res.appname + res.appid;
    var data = JSON.stringify(res);
    var url = this.sanitizer.bypassSecurityTrustUrl(
      "data:text/json;charset=UTF-8," + encodeURIComponent(data)
    );
    this.downloadUrl = url;
  }
}

app.component.html

<a [href]="downloadUrl" download="{{filename}}.json">Download</a>

请注意，创建 Json 文件和链接下载链接所需的只是代码 sn-p。

此外，您可以根据需要保留文件名。目前，文件名是使用 json 数据创建的。

如果您有兴趣查看现场演示，可以点击以下链接。

https://codesandbox.io/s/download-json-angular-k9fvz?file=/src/app/app.component.ts

【讨论】：