纯Javascript 合并CSV文件

习惯使用MAC的同事需要一个合并CSV文件的小工具,第一个文件+去掉前七行的剩余追加文件,追加文件可以多选。

由于没有写MAC应用的相关经验,就考虑使用网页应用完成。

搜罗相关资料,搞了个可以使用的缝合怪,JavaScript借助浏览器实现”跨平台“应用。哈哈哈

以下都是正文,Copy之后浏览器打开就可以使用。暂时仅限于CSV文件

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>读取 CSV(Comma-Separated Values)文件</title>

</head>

<body>

<div>

<span>首个文件:</span>

<input type="file" id="FirstFile" style="width:400px" accept="text/csv" />

<progress value="0"></progress>

</div>

<div>

<span>追加文件:</span>

<input type="file" id="inputOtherFile" multiple style="width:400px" accept="text/csv" />

<progress id="ProgressOtherFile" value="0"></progress>

<button id="btnAppendFile" οnclick="AppendFile3()">追加文件</button>

</div>

<div>

<h2>合并导出CSV</h2>

<a id="test" οnclick="GetCSV(this)" download="downlaod.csv" href="#">下载.CSV</a>

</div>

<div id="divFileNames">

</div>

<script type="text/javascript">

var result = "";

function GetCSV(mylink) {

if (result.length == 0) {

alert('无内容可以导出');

return;

}

var data = result;

mylink.download = "合并.CSV";

data = "\ufeff" + data;

var blob = new Blob([data], { type: 'text/csv,charset=UTF-8' });

var csvUrl = URL.createObjectURL(blob);

mylink.href = csvUrl;

}

window.onload = (event) => {

// console.log(event);

main();

}

function main() {

var inputFile = document.querySelector("input[id='FirstFile']");

inputFile.onchange = (event) => {

// console.log(event);

var file = inputFile.files[0];

var fileReader = new FileReader();

fileReader.readAsText(file, "utf-8");

// 显示进度

var progress = document.querySelector("progress");

progress.max = file.size;

progress.value = 0;

fileReader.onprogress = (event) => {

progress.value = event.loaded;

}

fileReader.onload = (event) => {

result = fileReader.result;

// console.log(result); // 读取的结果

}

}

}

function AppendFile3() {

readmultifiles(document.getElementById("inputOtherFile").files);

}

function readmultifiles(files) {

var reader = new FileReader();

function readFile(index) {

if (index >= files.length)

return;

var file = files[index];

var progress = document.getElementById("ProgressOtherFile");

progress.max = file.size;

progress.value = 0;

reader.onprogress = (event) => {

progress.value = event.loaded;

}

reader.onload = function (e) {

// get file content

var bin = e.target.result;

var resultTemp = bin.toString();

// do sth with bin

// var divFileNames = document.getElementById("divFileNames");

// divFileNames.innerHTML = divFileNames.innerHTML + '<div><label>' + file.name + '</label></div>';

// var indexofEnter = resultTemp.toString().indexOf('Measurement Unit ----->') + 23;

// resultTemp = resultTemp.substring(indexofEnter);

// indexofEnter = resultTemp.toString().indexOf('\n') + 1;

// result = result + resultTemp.substring(indexofEnter);

readFile(index + 1)

}

reader.readAsBinaryString(file);

}

readFile(0);

}

</script>

</body>

</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_15785207

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值