Angular2 to export/download json file

Pure JavaScript will do the job.

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

I had some problems when my json was so big, I added a Blob object in the Ankur Akvaliya answer and it works!!

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

You can use the DomSanitizer: https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

Import statement is needed:

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

You can do this using bypassSecurityTrustUrl() method from DomSanitizer.

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>

Note that it is only the code snippet that required for Json file creation and linking with a download link.

Also, you can keep the filename as your wish. Currently, the filename is created using the json data.

If you are interested to check the live demo then you can go with the following link.

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