JavaScript 读取CSV文件并转为js对象

最新推荐文章于 2024-11-14 23:34:43 发布

转载最新推荐文章于 2024-11-14 23:34:43 发布 · 720 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ddopp/p/10978051.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML和JavaScript实现CSV文件导入的方法，并详细解释了如何将CSV字符串转换为JavaScript对象数组的过程。通过创建隐藏的fileinput按钮，触发文件选择对话框，再利用FileReader API读取所选CSV文件的内容。

html部分

<!-- 创建隐藏file input -->
<button type="button" name="seach" onclick="FuncCSVInport()">CSV Import</button>
<input type="file" id="csvFileInput" onchange="readCSVFile(this)" />
#csvFileInput{
    position: absolute;
    right: 0px;
    opacity: 0;
}

js部分

<script>
    function csvToObject(csvString){
        var csvarry = csvString.split("\r\n");
        var datas = [];
        var headers = csvarry[0].split(",");
        for(var i = 1;i<csvarry.length;i++){
            var data = {};
            var temp = csvarry[i].split(",");
                 for(var j = 0;j<temp.length;j++){
                     data[headers[j]] = temp[j];
                 }
            datas.push(data);
        }
         return datas;
    }

     function FuncCSVInport() {
         $("#csvFileInput").val("");
         $("#csvFileInput").click();
     }

     function readCSVFile(obj) {
         var reader = new FileReader();
         reader.readAsText(obj.files[0]);
         reader.onload = function () {
               var data = csvToObject(this.result);
                console.log(data);//data为csv转换后的对象
        }
   }
</script>