En este artículo, aprenderemos cómo convertir una array JSON en CSV y cómo exportar CSV como un archivo descargable usando Blob en angular 8 .
Demostración: https://stackblitz.com/edit/angular8-json-to-csv
Paso 1: Conversión de JSON a CSV
Para convertir datos JSON a formato CSV, utilice el siguiente método.
ConvertToCSV(objArray, headerList) {
let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
let str = '';
let row = 'S.No, ';
for (let index in headerList) {
row += headerList[index] + ', ';
}
row = row.slice(0, -1);
str += row + '\r\n';
for (let i = 0; i & lt; array.length; i++) {
let line = (i + 1) + & #039; 039;;
for (let index in headerList) {
let head = headerList[index];
line += & #039;, 039; + array[i][head];
}
str += line + & #039;\r\n 039;;
}
return str;
}
El primer parámetro es Array of Objects, y el segundo parámetro es la lista de encabezados, generalmente las claves de Json.
Paso 2: exportar CSV como un archivo descargable.
Para exportar datos CSV como un archivo .csv , use el siguiente método.
downloadFile(data, filename = 'data') {
let csvData = this.ConvertToCSV(data, [
'name', 'age', 'average', 'approved', 'description']);
console.log(csvData)
let blob = new Blob(['\ufeff' + csvData], {
type: 'text/csv;charset=utf-8;'
});
let dwldLink = document.createElement("a");
let url = URL.createObjectURL(blob);
let isSafariBrowser = navigator.userAgent.indexOf(
'Safari') != -1 & amp; & amp;
navigator.userAgent.indexOf('Chrome') == -1;
//if Safari open in new window to save file with random filename.
if (isSafariBrowser) {
dwldLink.setAttribute("target", "_blank");
}
dwldLink.setAttribute("href", url);
dwldLink.setAttribute("download", filename + ".csv");
dwldLink.style.visibility = "hidden";
document.body.appendChild(dwldLink);
dwldLink.click();
document.body.removeChild(dwldLink);
}
El método de descarga acepta dos parámetros, el primer parámetro en JSONdata y el segundo parámetro es el nombre de archivo. el nombre de archivo predeterminado aquí es data . En el método downloadFile llamamos al método ConvertToCSV que convierte el JSON a CSV.
Un objeto Blob representa un objeto similar a un archivo de datos sin procesar e inmutables. Los blobs representan datos que no están necesariamente en un formato nativo de JavaScript. La interfaz de archivo se basa en Blob, hereda la funcionalidad de blob y la expande para admitir archivos en el sistema del usuario.
app.service.ts: cree un nuevo archivo de servicio con el nombre app.component.ts
import {
Injectable
}
from '@angular/core';
@Injectable()
export class AppService {
downloadFile(data, filename = 'data') {
let csvData = this.ConvertToCSV(data, [
'name', 'age', 'average', 'approved', 'description'
]);
console.log(csvData)
let blob = new Blob(['\ufeff' + csvData], {
type: 'text/csv;charset=utf-8;'
});
let dwldLink = document.createElement("a");
let url = URL.createObjectURL(blob);
let isSafariBrowser = navigator.userAgent.indexOf(
'Safari') != -1 & amp; & amp;
navigator.userAgent.indexOf('Chrome') == -1;
/if Safari open in new window to save file with random filename.
if (isSafariBrowser) {
/
dwldLink.setAttribute("target", "_blank");
}
dwldLink.setAttribute("href", url);
dwldLink.setAttribute("download", filename + ".csv");
dwldLink.style.visibility = "hidden";
document.body.appendChild(dwldLink);
dwldLink.click();
document.body.removeChild(dwldLink);
}
ConvertToCSV(objArray, headerList) {
let array =
typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
let str = '';
let row = 'S.No, ';
for (let index in headerList) {
row += headerList[index] + ', ';
}
row = row.slice(0, -1);
str += row + '\r\n';
for (let i = 0; i & lt; array.length; i++) {
let line = (i + 1) + & #039; 039;;
for (let index in headerList) {
let head = headerList[index];
line += & #039;, 039; + array[i][head];
}
str += line + & #039;\r\n 039;;
}
return str;
}
}
Ahora que tenemos nuestro archivo de servicio, use este archivo de servicio en nuestro componente para enviar los datos y verifique si nuestro método downloadFile funciona correctamente o no. Antes de crear el componente, primero importe nuestro servicio en app.module.ts
aplicación.módulo.ts:
import { AppService } from './app.service';
@NgModule({
providers: [AppService],
})</pre>
<h5>app.component.ts:-</h5>
<pre>
import { Component } from '@angular/core';
import { AppService } from './app.service';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
constructor(private appService:AppService) { }
jsonData = [
{
name: "Anil Singh",
age: 33,
average: 98,
approved: true,
description: "I am active blogger and Author."
},
{
name: 'Reena Singh',
age: 28,
average: 99,
approved: true,
description: "I am active HR."
},
{
name: 'Aradhya',
age: 4,
average: 99,
approved: true,
description: "I am engle."
},
];
download(){
this.appService.downloadFile(this.jsonData, 'jsontocsv');
}
}
Salida: archivo app.component.html
Publicación traducida automáticamente
Artículo escrito por anjisingavaram y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA