Durante projetos de banco de dados freqüentemente preciso exportar determinadas visualizações ou resultados intermediários como arquivos CSV. Estes são ainda utilizados para importar para outros bancos de dados. No entanto, muitas vezes é necessário para exibir os arquivos CSV em páginas da Web como tabelas HTML. Como a maioria das vezes os dados são gerados na mosca que requer algum JavaScript para transformar os dados CSV para HTML. Um dos meus favoritos atual é a biblioteca csv-to-html-table . Isso permite que você facilmente integrar arquivos CSV em suas páginas da web.

Instalação e uso

Faça o download do github ou clone-o.

git clone git@github.com:derekeder/csv-to-html-table.git

Após a instalação copie o arquivo CSV que você deseja exibir para a data/pasta e adicione o código JavaScript a seguir para onde você deseja exibir a tabela. O table-container div mantém a tabela CSV exibida. Neste exemplo, usaremos o conjunto de dados CSV “países” de worlddata . Um exemplo de dados CSV é mostrado abaixo:

"Country (en)";"Country (de)";"Country (local)";...
"Afghanistan";"Afghanistan";"Afganistan/Afqanestan";...
"Egypt";"Ägypten";"Misr";"EG";"Africa";...
"Albania";"Albanien";"Shqipëria";"AL";...
"Algeria";"Algerien";"Al-Jaza’ir/Algérie";"DZ";...

Código para exibir os dados CSV.

.
<div id='table-container'></div>
.
 
<script>
  CsvToHtmlTable.init({
    csv_path: 'data/countries.csv',
    element: 'table-container', 
    allow_download: true,
    csv_options: {separator: ';', delimiter: '"'},
    datatables_options: {"paging": false}
  });
</script>

É isso aí. Agora você tem seu arquivo CSV exibido como uma tabela HTML. A biblioteca conta com algumas outras dependências – jQuery, jQuery CSV, Bootstrap e DataTable . Note que estes já estão incluídos no download.

Você pode adicionar paginação, alterar o estilo de exibição e outras opções usando as opções do plug-in DataTables. Também é possível alterar as opções de análise de CSV e definir delimitadores. As tabelas são facilmente classificáveis ​​e também podem ser pesquisadas.

Você pode adicionar formatação e processamento personalizado a colunas individuais de CSV antes de exibir. Por exemplo, para converter todas as entradas na primeira coluna para maiúsculas você pode escrever da seguinte maneira. Isso passará o primeiro campo CSV para o to_uppercase método que irá converter o campo para maiúsculas. Você também pode usar esse método para validar quaisquer campos antes de exibir. Observe que o primeiro índice de campo começa com um ‘0’.

<script>
      function to_uppercase(country){
        if (country)
          return country.toUpperCase();
        else
          return "";
      }
 
      CsvToHtmlTable.init({
        csv_path: 'data/countries.csv', 
        element: 'table-container', 
        allow_download: true,
        csv_options: {separator: ';', delimiter: '"'},
        datatables_options: {"paging": false},
        custom_formatting: [[0, to_uppercase]]
      });
</script>

O usuário também pode baixar o CSV da página se você definir a allow_download opção para ‘true’.

Tags