Instalé el json-server en mi aplicación Angular que me permite guardar un formulario (llenado por el usuario) a través de una API json falsa en un archivo json:
{ "extracts": [ { "contentName": "xxx", "contentType": "xxx", "contentToStore": "xxx", "id": 1 } ] } También puedo ver los resultados en mi http://localhost:3000/extracts
En mi plantilla html , mi formulario se envía:
<form #postForm="ngForm" (ngSubmit)="onSubmitExtractions(postForm.value)">En el componente correspondiente, he escrito este código:
onSubmitExtractions(postData: Post) { this .dbService .submitExtractions(postData) .subscribe( postData => { this.jsonPosts.push(postData); } ); this .dbService .downloadExtractions(postData); }El primer fragmento escribe en el archivo json, con este código en la secuencia de comandos del servicio:
submitExtractions(post: Post): Observable<Post> { return this.httpClient.post<Post>(this.apiUrl, post, httpOptions); }Esto funciona bien y obtengo los resultados en un archivo json (base de datos del servidor json falso) y se supone que el segundo fragmento debe descargar este archivo cuyo código en el script de servicio es este:
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!'; } }¿Qué me falta en este código para descargar el contenido json? ¿Cómo descargo este contenido como csv o json o incluso como archivo de texto ?
Pruebe esta solución. Está usando el mismo blob solo con algunos datos constantes.
en html
<a [href]="fileUrl" download="file.txt">DownloadFile</a>en componente.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)); } }Para referencia, por favor visite:
https://stackblitz.com/edit/angular-blob-file-download-text-file?file=app%2Fapp.component.ts