¿Cómo crear y descargar un archivo CSV en JavaScript?

A veces, necesitamos obtener los datos en forma de un archivo CSV, pueden ser detalles del usuario u otros datos para fines de análisis o aprendizaje automático. Podemos obtener fácilmente los datos de cualquier objeto javascript o archivo JSON y descargarlos en forma de archivo CSV. 

En este artículo, trataremos con 2 fuentes de datos:

1. Objeto JavaScript
2. objeto JSON

Fuente de datos: objeto Javascript

Enfoque: en resumen, necesitamos el encabezado al que se refieren las claves de objeto de JavaScript y las filas a las que se refieren los valores de objeto de JavaScript. los necesitamos separados por una coma para convertirlo en un CSV. Usamos Blob para crear un archivo CSV.

// Javascript Object
const data = {
    id: 1,
    name: "Geeks",
    profession: "developer"
}

esto debe ser convertido a:

id, Geeks, profession
1, Geeks, developer

Paso 1: Configuración del proyecto

índice.html

<
principal.js

Paso 2: crear una función csvmaker en main.js. Esta función es responsable de hacer objetos java normales en forma de CSV.
principal.js

Producción:
 

Paso 3: Creación de una función de descarga. Esta función nos permitirá descargar un archivo CSV que contiene nuestros datos pasados.

const download = function (data) {
 
    // Creating a Blob for having a csv file format
    // and passing the data with type
    const blob = new Blob([data], { type: 'text/csv' });
 
    // Creating an object for downloading url
    const url = window.URL.createObjectURL(blob)
 
    // Creating an anchor(a) tag of HTML
    const a = document.createElement('a')
 
    // Passing the blob downloading url
    a.setAttribute('href', url)
 
    // Setting the anchor tag attribute for downloading
    // and passing the download file name
    a.setAttribute('download', 'download.csv');
 
    // Performing a download with click
    a.click()
}
 
const csvmaker = function (data) {
 
    // Empty array for storing the values
    csvRows = [];
 
    // Headers is basically a keys of an
    // object which is id, name, and
    // profession
    const headers = Object.keys(data);
 
    // As for making csv format, headers
    // must be separated by comma and
    // pushing it into array
    csvRows.push(headers.join(','));
 
    // Pushing Object values into array
    // with comma separation
    const values = Object.values(data).join(',');
    csvRows.push(values)
 
    // Returning the array joining with new line
    return csvRows.join('\n')
}
 
const get = async function () {
 
    // JavaScript object
    const data = {
        id: 1,
        name: "Geeks",
        profession: "developer"
    }
 
    const csvdata = csvmaker(data);
    download(csvdata);
}
 
// Getting element by id and adding
// eventlistner to listen everytime
// button get pressed
const btn = document.getElementById('action');
btn.addEventListener('click', get);

Producción:

Fuente de datos: objeto JSON

El proceso es similar para los objetos JSON.

• Necesitamos hacer un mapeo de objetos javascript a través de un archivo JSON. Funcionará igual que los datos que usamos anteriormente.

const get = async function () {
 
    // Json Get url
    const url = 'https://data.covid19india.org/data.json';
 
    // Fetching a data in a form of json objects
    const res = await fetch(url);
    const jsonobj = await res.json();
 
    // Getting statewise data (according to json objects)
    const jsondata = jsonobj.statewise
 
    // Making an object and mapping though the data
    // with keys and values
    const data = jsondata.map(row => ({
        state: row.state,
        statecode: row.statecode,
        active: row.active,
        confirmed: row.confirmed,
        deaths: row.deaths
    }))
 
    // console.log(jsondata)
 
    // console.log(csvmaker(data))
 
    const csvdata = csvmaker(data);
    download(csvdata);
 
}

• Necesitamos recorrer los valores del objeto y empujarlos a la array en la función csvmaker en main.js

const download = function (data) {
 
    // Creating a Blob for having a csv file format
    // and passing the data with type
    const blob = new Blob([data], { type: 'text/csv' });
 
    // Creating an object for downloading url
    const url = window.URL.createObjectURL(blob)
 
    // Creating an anchor(a) tag of HTML
    const a = document.createElement('a')
 
    // Passing the blob downloading url
    a.setAttribute('href', url)
 
    // Setting the anchor tag attribute for downloading
    // and passing the download file name
    a.setAttribute('download', 'download.csv');
 
    // Performing a download with click
    a.click()
}
 
const csvmaker = function (data) {
 
    // Empty array for storing the values
    csvRows = [];
 
    // Headers is basically a keys of an
    // object which is id, name, and
    // profession
    const headers = Object.keys(data);
 
    // As for making csv format, headers
    // must be separated by comma and
    // pushing it into array
    csvRows.push(headers.join(','));
 
    // Pushing Object values into array
    // with comma separation
    const values = Object.values(data).join(',');
    csvRows.push(values)
 
    // Returning the array joining with new line
    return csvRows.join('\n')
}
 
const get = async function () {
 
    // JavaScript object
    const data = {
        id: 1,
        name: "Geeks",
        profession: "developer"
    }
 
    const csvdata = csvmaker(data);
    download(csvdata);
}
 
// Getting element by id and adding
// eventlistner to listen everytime
// button get pressed
const btn = document.getElementById('action');
btn.addEventListener('click', get);

Producción: