Vue（JavaScript）读取csv表格并求某一列之和（大浮点数处理: decimal.js）

想要读这个表格，并且求第二列所有价格的和

方法一：通过添加文件输入元素上传csv

完整（正确）代码

选择了csv文件之后，会自动求和 并显示在price sum中

<template><div><input type="file" @change="handleFileUpload" /><p>Price sum: {{ priceSumFinal }}</p></div>
</template><script setup>
import {ref} from 'vue'
import Decimal from 'decimal.js';let priceSumFinal = ref(0)const handleFileUpload=(event)=> {// 获取用户选择的文件const file = event.target.files[0];// 创建一个新的FileReader对象const reader = new FileReader();// 监听文件读取完成事件reader.onload = () => {// 将读取的文件内容传递给处理CSV数据的函数parseCSVData(reader.result);};// 读取文件内容reader.readAsText(file);
}const parseCSVData = (data)=>{// 解析CSV文件内容，并将其转换为对应的数据结构// 例如，将CSV中的每一行转换为一个对象const rows = data.split('\n');const headers = rows[0].split(',');const csvData = [];for (let i = 1; i < rows.length; i++) {const row = rows[i].split(',');const rowData = {};for (let j = 0; j < headers.length; j++) {rowData[headers[j]] = row[j];}csvData.push(rowData);}console.log(csvData);// 初始化 priceSum 为 Decimal 类型let priceSum = new Decimal(0);console.log(typeof priceSum); // 输出：objectfor (let i = 1; i < 100; i++) {// 使用 Decimal 来处理每个 price 值let priceDecimal = new Decimal(csvData[i].price);priceSum = priceSum.plus(priceDecimal);}console.log(priceSum.toString()); // 输出：将 Decimal 转换为字符串priceSumFinal.value = priceSum.toString()}</script>

之前的错误部分

因为价格是小数，所以下面的代码出错。

如果把parseFloat改成parseInt，那么求和没有意义，因为不准确。如果要用parseFloat，是不能用BigInt的。BigInt 只能表示整数，不能直接用于表示浮点数。

let priceSum = BigInt(0);
console.log(typeof priceSum); // 输出：bigint// 遍历 csvData 数组，累加 price 值
for (let i = 1; i < csvData.length; i++) {// 确保 csvData[i].price 是一个可以转换为 BigInt 的字符串let priceBigInt = BigInt(parseFloat(csvData[i].price));priceSum += priceBigInt;
}console.log(priceSum.toString()); // 输出：将 BigInt 转换为字符串}

如果需要处理非常大的浮点数，要考虑使用第三方库，如 bignumber.js 或 decimal.js，这些库提供了对任意精度的浮点数的支持。我这次用的是decimal

方法二：自动读取？

按照这篇文章的意思是只能通过input读取？

https://blog.51cto.com/u_16099178/6425473