0

when I'm going to generate the CSV it generates the csv using javascript but it brings me less data than I have in the database, for example in the account report I have 400 in my database, but when I get the csv it return me only 118 results, does anyone know what it could be? my API is Laravel.

If I give a console.log(accounts) it returns all the records of the databases, the 400 values

import React from "react";
import { useState, useEffect } from "react";
import axios from "axios";

const endpoint = "http://localhost:8000/api";

const ReportAccount = () => {
  const [accounts, setAccounts] = useState([]);

  useEffect(() => {
    getAllAccounts();
  }, []);

  const getAllAccounts = async () => {
    const response = await axios.get(`${endpoint}/accounts`);
    setAccounts(response.data);
  };

  var gerarCsv = function () {
    var csv =
      "id| nome| tipo| rua| cidade| cep| estado| pais| siteWeb| setor| receitaAnual| funcionarios| descricao|auditoriaIndependente| cnpj| capital| dataEncerramento| demandasJuridicas| estrategiaCliente| marcas| metaAnuais| naturezaJuridica| observacaoRegimeEspecial| origemConta| outrasRelevantes| principaisProdutos|principalNecessidade| regimeEspecial| segmentoAtuacao| socAnual| statusConta| razaoSocial| quantidadeOportunidadesGanhas| dataFundacao| projeto\n";

    accounts.forEach(function (row) {
      csv += row.id;
      csv += "|" + row.nome;
      csv += "|" + row.tipo;
      csv += "|" + row.rua;
      csv += "|" + row.cidade;
      csv += "|" + row.cep;
      csv += "|" + row.estado;
      csv += "|" + row.pais;
      csv += "|" + row.siteWeb;
      csv += "|" + row.setor;
      csv += "|" + row.receitaAnual;
      csv += "|" + row.funcionarios;
      csv += "|" + row.descricao;
      csv += "|" + row.capital;
      csv += "|" + row.auditoriaIndependente;
      csv += "|" + row.cnpj;
      csv += "|" + row.capital;
      csv += "|" + row.dataEncerramento;
      csv += "|" + row.demandasJuridicas;
      csv += "|" + row.estrategiaCliente;
      csv += "|" + row.marcas;
      csv += "|" + row.metaAnuais;
      csv += "|" + row.naturezaJuridica;
      csv += "|" + row.observacaoRegimeEspecial;
      csv += "|" + row.origemConta;
      csv += "|" + row.outrasRelevantes;
      csv += "|" + row.principaisProdutos;
      csv += "|" + row.principalNecessidade;
      csv += "|" + row.regimeEspecial;
      csv += "|" + row.segmentoAtuacao;
      csv += "|" + row.socAnual;
      csv += "|" + row.statusConta;
      csv += "|" + row.razaoSocial;
      csv += "|" + row.quantidadeOportunidadesGanhas;
      csv += "|" + row.dataFundacao;
      csv += "|" + row.projeto;
      csv += "\n";
    });

    var hiddenElement = document.createElement("a");
    hiddenElement.href = "data:text/csv;charset=utf-8," + encodeURI(csv);
    hiddenElement.target = "_blank";
    hiddenElement.download = "Accounts.csv";
    hiddenElement.click();
  };

  return (
    <div>
      <div class="d-grid gap-2">
        <button
          onClick={() => gerarCsv()}
          className="btn btn-outline-primary m-1"
        >
          Contas
        </button>
      </div>
    </div>
  );
};

export default ReportAccount;
Coimbra
  • 25
  • 5

1 Answers1

0

Friend, solve using the library https://www.npmjs.com/package/react-csv

import { CSVLink } from "react-csv";

<CSVLink
  data={data}
  filename={"my-file.csv"}
  className="btn btn-primary"
  target="_blank"
>
  Download me
</CSVLink>;
Coimbra
  • 25
  • 5