Exportar matriz para CSV em JavaScript

Este tutorial demonstrará como exportar informações de array JavaScript para um arquivo CSV no lado do cliente.

Para converter as informações do array em um arquivo CSV, precisamos analisar corretamente os dados JavaScript no formato CSV. Precisamos armazená-lo como um objeto que pode lidar com a codificação e o formato de dados CSV.

Em nosso exemplo, usamos um array de arrayes para armazenar os dados.

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];

let csvContent = 'data:text/csv;charset=utf-8,';

data.forEach(function(rowArray) {
  let row = rowArray.join(',');
  csvContent += row + '\r\n';
});

Armazenamos conteúdo do array data para o objeto csvContent. Criamos linhas de cada array e os armazenamos em um objeto separado.

Como alternativa, podemos usar o código a seguir, pois é uma maneira mais curta de obter o mesmo resultado usando funções de seta.

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];
let csvContent =
    'data:text/csv;charset=utf-8,' + data.map(e => e.join(',')).join('\n');

A função map() chama uma função em cada elemento do array e cria um novo array. O método join() unirá os componentes do array existente a uma string com a ajuda de um separador. No nosso caso, usamos uma vírgula como separador.

Para baixar e codificar o objeto CSV criado acima, usamos o seguinte código.

var encodedUri = encodeURI(csvContent);
window.open(encodedUri);

Agora vamos exportar este objeto csvContent para um arquivo externo. O EncodeURI é usado para codificar o URI. Esta função codifica caracteres especiais exceto (, / ? : @ & = + $) E retorna um valor de string que representa o URI codificado.

Para dar ao arquivo CSV um nome específico, precisamos criar um nó DOM oculto e definir a função de download.

Isso é feito a seguir.

var encodedUri = encodeURI(csvContent);
var link = document.createElement('a');
link.setAttribute('href', encodedUri);
link.setAttribute('download', 'my_data.csv');
document.body.appendChild(link);
link.click();

O método setAttribute() adiciona um valor de atributo específico a um determinado elemento. No código acima, link.click() é usado para baixar para baixar diretamente o nome do arquivo fornecido na função link.setAttribute().

Se quisermos que nossos dados sejam inseridos entre aspas, podemos usar a função JSON.stringify() ao criar o objeto de dados CSV.

Veja o código abaixo.

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];
var csv = data.map(function(d) {
                return JSON.stringify(d);
              })
              .join('\n')
              .replace(/(^\[)|(\]$)/mg, '');
console.log(csv);

Resultado:

"rahul" "delhi" "accounts"
"rajev" "UP"  "sales dept"