React中JS生成CSV数据不全问题求助（Laravel API）

我用React结合Laravel API开发，前端通过axios获取数据库内400条账户数据，console.log(accounts)能正常显示全量数据，但调用JavaScript生成CSV文件时，仅导出118条数据。以下是实现代码：

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; // 此处重复拼接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;

1. 数据含特殊字符导致CSV截断 #

CSV直接拼接字符串时，若descricao、observacaoRegimeEspecial这类字段包含换行符\n、双引号或竖线，会破坏CSV结构，浏览器解析data URL时会提前截断内容，导致导出条数不足。

解决办法：给每个字段添加引号包裹，同时转义特殊字符：

// 新增字段格式化函数
const formatField = (value) => {
  if (value == null) return '""'; // 处理null/undefined
  const escapedValue = String(value)
    .replace(/"/g, '""') // 转义双引号
    .replace(/\n/g, " ") // 替换换行符为空格，避免截断
    .replace(/\|/g, "\\|"); // 转义字段内的竖线分隔符
  return `"${escapedValue}"`;
};

// 修改拼接逻辑，每个字段都用formatField处理
accounts.forEach(function (row) {
  csv += formatField(row.id);
  csv += "|" + formatField(row.nome);
  csv += "|" + formatField(row.tipo);
  // ... 其他字段同理替换
  csv += "\n";
});

2. Data URL长度限制触发截断 #

不同浏览器对data URL的长度有上限（如早期Chrome限制在2MB左右），400条数据拼接成字符串后极易超出限制，导致后续内容被丢弃。

解决办法：改用Blob对象生成下载链接，Blob无长度限制，更适合大量数据：

var gerarCsv = function () {
  // ... 保持CSV拼接逻辑（需先处理特殊字符）
  // 用Blob替代data URL
  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
  const downloadUrl = URL.createObjectURL(blob);
  
  var hiddenElement = document.createElement("a");
  hiddenElement.href = downloadUrl;
  hiddenElement.download = "Accounts.csv";
  hiddenElement.click();
  
  URL.revokeObjectURL(downloadUrl); // 释放内存，避免内存泄漏
};

3. 重复字段的隐性影响 #

代码中重复拼接了row.capital，虽然不会直接减少导出条数，但如果该字段包含特殊字符，可能间接引发截断问题，建议修正重复代码，保持表头与数据字段一一对应。

4. 换行符写法不一致 #

表头末尾若用字符串直接换行而非\n，可能在部分环境下解析异常，建议统一用"\n"表示换行，避免语法问题。

内容的提问来源于stack exchange，提问作者Coimbra