Angular2 导出/下载 json 文件

Posted 2023-02-22

【中文标题】Angular2 导出/下载 json 文件

【英文标题】：Angular2 to export/download json file

【发布时间】：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 中也是如此。

【参考方案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