js 读取CSV文件&导出CSV文件

最新推荐文章于 2026-07-07 08:20:44 发布

原创最新推荐文章于 2026-07-07 08:20:44 发布 · 7.5k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍如何使用JavaScript进行CSV文件的读取和导出。通过HTML5的FileReader对象实现文件读取，借助input[type='file']元素让用户选择文件。同时，利用a标签和Blob对象创建导出功能，导出时会添加一个隐藏的a标签来完成下载操作。

导入使用HTML5的FileReader对象

要有一个input[type="file"]

<input id="upload_input" class="hide" type="file" accept=".csv" onchange="onUpload(this)" />

接收文件方法

function onUpload(input) {
	//	校验文件
	var file = input.files[0];
	var reader = new FileReader();
	if(typeof reader == 'undefined') {
		showTip("您的浏览器暂不支持该功能", false);
		return;
	}
	var fileName = file.name;
	var pointIndex = fileName.lastIndexOf(".");
	var fileSuffix = fileName.substr(pointIndex);
	if (fileSuffix == ".CSV" || fileSuffix == ".csv") {
		try {
			reader.readAsText(file, 'utf-8');
			reader.onload = function(f) {
				if (!isEmpty(this.result)) {
					uploadContent = this.result;
					//submit();
				} else {
					showTip("上传的文件为空！", false);
				}
				input.value='';
			}
		} catch (e) {
			showTip("读取文件失败！", false);
			console.log(e);
		}
	} else {
		showTip("您选择的文件不是CSV格式", false);
	}
}

导出使用a标签和Blob对象

添加隐藏a标签

<a id="export_href" style="display: none;">导出</a>

添加导出方法

// content为需要导出的文本内容（需要符合csv文件格式）
var blob = new Blob(["\uFEFF" + content], { type: 'text/csv;charset=utf-8;' });
filename = "export_file_" + new Date().format('yyyy-MM-dd@hh:mm:ss') + ".csv";
var link = byId("export_href");
link.download = filename;//这里替换为你需要的文件名
link.href = URL.createObjectURL(blob);
link.click();