js 怎么解析CSV数据

function parseSimpleCSV(csvString) {
    const lines = csvString.split('\n'); // 按行分割
    const result = [];
    lines.forEach(line => {
        if (line.trim() === '') return; // 跳过空行
        const values = line.split(','); // 按逗号分割字段
        result.push(values);
    });
    return result;
}

const simpleCsvData = `name,age,city
Alice,30,New York
Bob,24,London
Charlie,35,Paris`;

// console.log(parseSimpleCSV(simpleCsvData));
/*
输出大概是这样：
[
  ["name", "age", "city"],
  ["Alice", "30", "New York"],
  ["Bob", "24", "London"],
  ["Charlie", "35", "Paris"]
]
*/

Papa Parse

csv-parser

Papa Parse

npm install papaparse

yarn add papaparse

// 假设这是你的HTML文件，或者在Node.js环境
// 如果在浏览器环境，可以通过CDN引入：<script src="https://unpkg.com/papaparse@5.4.1/papaparse.min.js"></script>

// 在模块化环境中（如Vue/React项目或Node.js）
import Papa from 'papaparse';

const complexCsvData = `name,age,description
Alice,30,"Lives in New York, a very busy city."
Bob,24,"Likes to read,
and code in JavaScript."
Charlie,35,"Works at ""ABC Corp""."`; // 注意双引号转义

Papa.parse(complexCsvData, {
    header: true, // 将第一行解析为对象的键
    dynamicTyping: true, // 尝试将字符串转换为数字或布尔值
    skipEmptyLines: true, // 跳过空行
    complete: function(results) {
        console.log("解析结果:", results.data);
        console.log("解析错误:", results.errors);
        /*
        输出大概是这样：
        [
          { name: 'Alice', age: 30, description: 'Lives in New York, a very busy city.' },
          { name: 'Bob', age: 24, description: 'Likes to read,\nand code in JavaScript.' },
          { name: 'Charlie', age: 35, description: 'Works at "ABC Corp".' }
        ]
        */
    },
    error: function(err, file) {
        console.error("解析过程中发生错误:", err, file);
    }
});

Papa Parse

header: true

dynamicTyping

split(',')

"

"New York, USA"

New York

USA

"This is a long description\nthat spans multiple lines."

""

"He said ""Hello!""."

He said "Hello!".

;

\t

FileReader

readAsText(file, encoding)

fs.readFile

encoding

a,,c

a,b,

null

undefined

Papa Parse

<input type="file">

FileReader

Papa Parse

// main.js (主线程)
document.getElementById('csvFile').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        if (typeof Worker !== 'undefined') { // 检查浏览器是否支持Web Workers
            const worker = new Worker('csvWorker.js'); // 创建Worker
            worker.postMessage(file); // 将文件对象发送给Worker

            worker.onmessage = function(e) {
                if (e.data.type === 'complete') {
                    console.log('所有数据解析完成:', e.data.data);
                    // 在这里处理解析后的数据，比如渲染到表格
                } else if (e.data.type === 'chunk') {
                    console.log('接收到部分数据:', e.data.data);
                    // 可以实时更新UI，比如显示进度或部分数据
                } else if (e.data.type === 'error') {
                    console.error('解析错误:', e.data.error);
                }
            };
            worker.onerror = function(error) {
                console.error('Worker 错误:', error);
            };
        } else {
            console.warn('您的浏览器不支持Web Workers，大型文件解析可能会阻塞UI。');
            // 如果不支持，直接在主线程解析，但要提醒用户
            Papa.parse(file, {
                header: true,
                dynamicTyping: true,
                skipEmptyLines: true,
                worker: false, // 明确不在worker中运行
                step: function(row) {
                    // 每次解析一行或一个块时触发
                    console.log("行数据:", row.data);
                },
                complete: function(results) {
                    console.log("解析完成:", results.data);
                },
                error: function(err) {
                    console.error("解析错误:", err);
                }
            });
        }
    }
});

// csvWorker.js (Web Worker 文件)
importScripts('https://unpkg.com/papaparse@5.4.1/papaparse.min.js'); // 在Worker中加载Papa Parse

self.onmessage = function(e) {
    const file = e.data;
    if (file) {
        const results = [];
        Papa.parse(file, {
            header: true,
            dynamicTyping: true,
            skipEmptyLines: true,
            step: function(row) {
                // 每解析一行数据就发送回主线程，或者累积一定量再发送
                self.postMessage({ type: 'chunk', data: row.data });
                results.push(row.data); // 也可以在worker内部累积所有数据
            },
            complete: function() {
                self.postMessage({ type: 'complete', data: results }); // 解析完成后发送所有数据
            },
            error: function(err) {
                self.postMessage({ type: 'error', error: err });
            }
        });
    }
};

fs

createReadStream

csv-parser

// 首先安装：npm install csv-parser
const fs = require('fs');
const csv = require('csv-parser');

const filePath = './large_data.csv'; // 假设你的大CSV文件

fs.createReadStream(filePath)
    .pipe(csv()) // 将文件读取流管道到csv解析器
    .on('data', (row) => {
        // 每解析一行数据就会触发一次 'data' 事件
        // row 是一个JavaScript对象，键是CSV的列头
        console.log('处理行:', row);
        // 在这里可以对每行数据进行实时处理，比如存入数据库、进行计算等
        // 避免将所有数据一次性累积到内存中
    })
    .on('end', () => {
        console.log('CSV文件解析完成。');
    })
    .on('error', (err) => {
        console.error('解析CSV文件时发生错误:', err);
    });

// 如果你更喜欢Papa Parse，它在Node.js中也支持流式API：
// Papa.parse(fs.createReadStream(filePath), {
//     header: true,
//     dynamicTyping: true,
//     step: function(row) { /* 处理每行 */ },
//     complete: function() { /* 完成 */ },
//     error: function(err) { /* 错误 */ }
// });