Como fazer upload e download de arquivos CSV com Angular

Os conjuntos de dados são extremamente essenciais na construção de modelos de API e vários processos de negócios. É por isso que importar e exportar CSV é uma funcionalidade frequentemente necessária.

Neste tutorial você aprenderá agora a baixar e importar um arquivo CSV dentro de um aplicativo Angular. Estaremos trabalhando com um arquivo CSV que contém detalhes do funcionário. O código será escrito em TypeScript.

Antes de começar, você precisará configurar um novo ambiente Angular, criar um novo espaço de trabalho com um aplicativo inicial e começar a servir. Um guia passo a passo para criar o clichê para seu aplicativo Angular pode ser encontrado no tutorial oficial.

Aqui está a estrutura de pastas do aplicativo clichê:

Root
-- src
---- app
------ app-routing.module.ts
------ app.component.css
------ app.component.html
------ app.component.ts
------ app.module.ts
---- models
---- services
------ csv.services.ts
---- index.html
---- main.ts
---- styles.css

1. Criar um modelo simples

Primeiramente, vamos criar uma classe simples para modelar o empregado. Este modelo será consumido pelos componentes Angular.

O modelo para manter os dados do funcionário é fornecido abaixo. Este é apenas um modelo básico com nome, e-mail e cidade do funcionário.

export class User {
  name: string;
  email: string;
  city: string;
}

2. Crie o serviço

Aplicações angulares possuem uma estrutura modular. Isso torna o aplicativo robusto e fácil de manter. Uma das regras principais de qualquer aplicativo Angular é que os componentes não devem ter permissão para salvar ou buscar dados diretamente. É por isso que você tem que fazer uso de Serviços acessar e apresentar dados. Em nosso caso de uso, exigimos um serviço para download e importação de dados CSV.

Nosso arquivo de serviço é csv.services.ts.

Depois que o serviço é criado, ele pode ser injetado em qualquer componente. Antes de fazer o CSV.service disponível para injeção, ele precisa ser registrado em app.module.ts como provedor.

Nesta demonstração, codificaremos dois tipos diferentes de funcionalidades:

• salvar dados em um CSV
• importando dados de um CSV

Método para salvar dados em um CSV

Em primeiro lugar, vamos lidar com a funcionalidade mais simples. Salvar dados em um CSV envolve a leitura de uma matriz de objetos. Os objetos em Javascript vêm com propriedades que possuem um valor. Vamos ler todas essas propriedades para cada objeto e juntá-las com uma vírgula. A linha de código abaixo alcançará isso:

let propertyNames = Object.keys(data[0]);
let rowWithPropertyNames = propertyNames.join(',') + 'n';

Depois que os títulos forem unidos, eles serão anexados como o primeira linha. Em seguida, um loop percorrerá o array e lerá todas as propriedades e seus valores. Esses valores serão anexados ao arquivo CSV.

A parte completa do código, para construir o cabeçalho, ler o conteúdo da matriz e construir o CSV é fornecida abaixo.

public saveDataInCSV(data: Array): string {
    if (data.length == 0) {
      return '';
    }
    let propertyNames = Object.keys(data[0]);
    let rowWithPropertyNames = propertyNames.join(',') + 'n';
    let csvContent = rowWithPropertyNames;
    let rows: string[] = [];

    data.forEach((item) => {
      let values: string[] = [];
      propertyNames.forEach((key) => {
        let val: any = item[key];

        if (val !== undefined && val !== null) {
          val = new String(val);
        } else {
          val="";
        }
        values.push(val);
      });
      rows.push(values.join(','));
    });
    csvContent += rows.join('n');
    return csvContent;
  }

Método para importar dados de um CSV

Nosso próximo serviço é importar dados de um CSV. Para isso, definiremos um function que levaria o conteúdo de um arquivo na forma de um string. Os nomes das propriedades e as linhas de dados serão criados a partir do conteúdo do arquivo.

const propertyNames = csvText.slice(0, csvText.indexOf('n')).split(',');
const dataRows = csvText.slice(csvText.indexOf('n') + 1).split('n');

Com as linhas de código acima, teremos os nomes e os dados das propriedades. Com essas informações, resta apenas a tarefa de imprimir o conteúdo do CSV. O código para imprimir o conteúdo é dado abaixo:

public importDataFromCSV(csvText: string): Array {
    const propertyNames = csvText.slice(0, csvText.indexOf('n')).split(',');
    const dataRows = csvText.slice(csvText.indexOf('n') + 1).split('n');

    let dataArray: any[] = [];
    dataRows.forEach((row) => {
      let values = row.split(',');

      let obj: any = new Object();

      for (let index = 0; index < propertyNames.length; index++) {
        const propertyName: string = propertyNames[index];

        let val: any = values[index];
        if (val === '') {
          val = null;
        }

        obj[propertyName] = val;
      }

      dataArray.push(obj);
    });

    return dataArray;
  }

4. Construindo os elementos da interface do usuário

Em seguida, vamos construir os elementos HTML para importar e exportar os arquivos CSV.

O arquivo para elementos de interface do usuário é app.component.html.

Salvando o conteúdo de um CSV

Para salvar um arquivo CSV, usaremos uma forma muito tradicional de baixar arquivos em JavaScript.

1. Crie um elemento âncora oculto .
2. Colocou o href tipo deste elemento âncora para data:text/csv.
3. Acionar automaticamente o click evento.

public saveDataInCSV(name: string, data: Array): void {
    let csvContent = this._csvService.saveDataInCSV(data);
    
    var hiddenElement = document.createElement('a');
    hiddenElement.href="https://code.tutsplus.com/tutorials/data:text/csv;charset=utf-8," + encodeURI(csvContent);
    hiddenElement.target="_blank";
    hiddenElement.download = name + '.csv';
    hiddenElement.click();
}

public arrayWithSimpleData: Array = [
    { name: 'Eve', email: '[email protected]', city: 'San Francisco' },
    { name: 'John', email: '[email protected]', city: 'London' },
    { name: 'Nick', email: '[email protected]', city: 'Madrid' },
];

Em seguida, vincularemos a funcionalidade acima a um botão que será exibido na tela para clicarmos. Isso será inserido em app.component.html.

  Save simple data array

Lendo o conteúdo de um CSV

É bastante simples abrir e ler arquivos em HTML usando o marcação. A tag de entrada vem com propriedades como type, [accept] e (change).

• type tem que ser 'file' para indicar que um arquivo será escolhido pelo usuário.
• [accept] tem que ser '.csv' para indicarte que apenas arquivos CSV devem ser mostrados ao usuário para seleção.
• (change) vai ligar para o importDataFromCSV função com um parâmetro $event que possui propriedades com o conteúdo do arquivo.

o $event propriedade carrega o arquivo dentro event.target.files, onde arquivos é uma matriz. O conteúdo do arquivo pode ser extraído em diferentes formatos. Para o nosso caso de uso, iremos extrair text() do arquivo. Lembre-se de que o método de leitura do arquivo deve ser assíncrono. É por isso que usaremos await e async. O código simples para ler o texto de um arquivo CSV está aqui:

private async getTextFromFile(event: any) {
    const file: File = event.target.files[0];
    let fileContent = await file.text();
    
    return fileContent;
}

Depois que o conteúdo de texto é extraído do arquivo CSV, podemos usar o serviço definido na etapa 2.

public async importDataFromCSV(event: any) {
    let fileContent = await this.getTextFromFile(event);
    this.importedData = this._csvService.importDataFromCSV(fileContent);
}

E a função acima pode ser vinculada a um botão em app.component.html.

Export simple data

Import from csv

5. Integrando todo o aplicativo

Agora é hora de construir app.module.ts. É aqui que todos os provedores, importações, declarações e o componente bootstrap serão registrados.

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { CsvService } from '../services/csv.services';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, FormsModule],
  providers: [CsvService],
  bootstrap: [AppComponent],
})
export class AppModule {}

Com esta alteração, você poderá ver a seguinte tela.

Demonstração ao vivo

Conclusão

Nesta postagem, você viu como fazer upload e download de dados CSV e como analisar dados CSV dentro e fora de um arquivo de texto.