JS读取带表头的excel为json格式数据

news/2024/7/19 15:28:45 标签: js

项目中需要做一个上传表格的功能,具体为上传本地excel文件并拼成json传给后台然后保存用户上传的表格数据,但是碰到一个问题,就是这个表格是带表头的,如下:

表格的第一行只有一个表头并且独占一行,我用的是xlsx.full.min.js解析代码如下

  if (!obj.files) {
            return;
        }
        try {
            var f = obj.files[0];

            var reader = new FileReader();
            reader.onload = function (e) {
                var data = e.target.result;
                if (rABS) {
                    wb = XLSX.read(btoa(fixdata(data)), {//手动转化
                        type: 'base64'
                    });
                } else {
                    wb = XLSX.read(data, {
                        type: 'binary'
                    });
                   
                }
                //读取页面demo中的内容
                //这里的wb.SheetNames[0]是excel表格中第一个表格页的名字默认应该是sheel1,
                //但是这个名字用户可以自定义,所以不能写死,得获取表格名字
                demo = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
                //获取选择的文件类型,调用不同的接口保存至数据库            
                 upload_grid(demo);
               
            };
            if (rABS) {
                reader.readAsArrayBuffer(f);
            } else {
                reader.readAsBinaryString(f);
            }
            //进行网页html结构的替换
            $("#file_upload").replaceWith('<input id="file_upload" accept=".xls,.xlsx" onchange="importf_xls(this)" name="file" type="file" style="width: 140px;position: absolute;font-size: 14px;height: 25px;left: 57%;opacity: 0;"/>');
        } catch (e) {
            alert('请选择对应的文件!');  //异常捕获
        }

这里直接读取出来的demo格式是

由此可见每一个demo[i]的第一个key都成了表头,正常格式应该是[{"行政区划代码":"xxxx","监测年度":"xxxx"}]这种的,所以我找到上边变量的wb,删除了输出中的属性A1也就是解析出的表头数据,要删除的东西长这样

加了删除的代码长这样,就是在demo前加一个delete就行了

if (!obj.files) {
            return;
        }
        try {
            var f = obj.files[0];

            var reader = new FileReader();
            reader.onload = function (e) {
                var data = e.target.result;
                if (rABS) {
                    wb = XLSX.read(btoa(fixdata(data)), {//手动转化
                        type: 'base64'
                    });
                } else {
                    wb = XLSX.read(data, {
                        type: 'binary'
                    });
                    delete wb.Sheets[wb.SheetNames[0]].A1
                    console.log(wb)


                }
                //读取页面demo中的内容
                demo = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
                console.log(demo)
         

            };
            if (rABS) {
                reader.readAsArrayBuffer(f);
            } else {
                reader.readAsBinaryString(f);
            }
            //进行网页html结构的替换
//            $("#file_upload").replaceWith('<input id="file_upload" accept=".xls,.xlsx" onchange="importf_xls(this)" name="file" type="file" style="width: 140px;position: absolute;font-size: 14px;height: 25px;left: 57%;opacity: 0;"/>');
        } catch (e) {
            alert('请选择对应的文件!');  //异常捕获
        }

这样一顿操作,删除了A1之后的demo长这样

看这个时候的demo相比之前的已经规整多了,这个时候只需要遍历demo,重组数据就行了

if (!obj.files) {
            return;
        }
        try {
            var f = obj.files[0];

            var reader = new FileReader();
            reader.onload = function (e) {
                var data = e.target.result;
                if (rABS) {
                    wb = XLSX.read(btoa(fixdata(data)), {//手动转化
                        type: 'base64'
                    });
                } else {
                    wb = XLSX.read(data, {
                        type: 'binary'
                    });
                    delete wb.Sheets[wb.SheetNames[0]].A1
                    console.log(wb)


                }
                //读取页面demo中的内容
                demo = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
                console.log(demo)
                var arr = []
                for(var i=1;i<demo.length;i++){
                    arr[i] = {}
                    arr[i].adcode = demo[i]["__EMPTY"];
                    arr[i].year = demo[i]["__EMPTY_1"];
                    arr[i].gdcode = demo[i]["__EMPTY_2"];
                    arr[i].point_name = demo[i]["__EMPTY_3"];
                    arr[i].longitude = demo[i]["__EMPTY_4"];
                    arr[i].latitude = demo[i]["__EMPTY_5"];
                    arr[i].reference = demo[i]["__EMPTY_6"];

                }
               
                console.log(arr)

            };
            if (rABS) {
                reader.readAsArrayBuffer(f);
            } else {
                reader.readAsBinaryString(f);
            }
            //进行网页html结构的替换
//            $("#file_upload").replaceWith('<input id="file_upload" accept=".xls,.xlsx" onchange="importf_xls(this)" name="file" type="file" style="width: 140px;position: absolute;font-size: 14px;height: 25px;left: 57%;opacity: 0;"/>');
        } catch (e) {
            alert('请选择对应的文件!');  //异常捕获
        }

然后arr就是我们要传给后台的json数据了,但是!!!输出转为string的arr傻眼了,这他娘的多了一个null是啥玩意啊???为啥会有null啊,然后就想了一笨办法,用"null,"分隔一下

var this_data = JSON.stringify(arr).split("null,")
console.log("["+this_data[1])

终于完毕了,最后是这样

终于格式正确了,上传成功了……


http://www.niftyadmin.cn/n/875375.html

相关文章

JSON数据的key有空格然后key 会undefined的问题

平时拿到后台返回的JSON数据遍历了是这么用的 data[i].name 但是一直报错说undefined&#xff0c;仔细看数据发现并不是"name"而是"name " name的key有空格 这个时候把代码改成这样就可以了 data[i]["name "]

匹配两个接口的数据出现错误的问题

在项目中要给一个接口中字段的值赋给另一个接口字段&#xff0c;例如 if(data[i].code this_data[j].point_code){data[i].leq this_data[j].leq } 结果拿的数据都对&#xff0c;却死活进不了判断&#xff0c;找了很久才发现是data[i].code的字符串中多了一个空格 data[i].…

jQuery中attr()与prop()区别介绍

.attr() &#xff1a; 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。 •.attr( attributeName ) •.attr( attributeName ) •.attr( attributeName, value ) •.attr( attributeName, value ) •.attr( attributes ) •.attr( attribu…

JS判断所有浏览器型号(包括谷歌和360)

//判断浏览器 function checkBrowser() {var ua navigator.userAgent.toLocaleLowerCase();var browserType null;if (ua.match(/msie/) ! null || ua.match(/trident/) ! null) {browserType "IE";browserVersion ua.match(/msie ([\d.])/) ! null ? ua.match(…

Webstorm配置YUI来压缩CSS和JS代码

在网上搜YUI的jar包&#xff0c;下载完放在webstorm的安装目录lib里。 打开webstorm的设置&#xff0c;找到Tool下面的Filewatchers 点右上角的绿色加号&#xff0c;点开之后翻到最底下找到这俩货逐一添加&#xff0c; 配置路径&#xff0c;就是放jar包的文件夹路径&#xff0c…

openlayers加载WMS服务图层

var tian_di_tu_road_layer new ol.layer.Tile({title: "天地图路网",source: new ol.source.XYZ({url: "http://t4.tianditu.com/DataServer?Tvec_w&x{x}&y{y}&l{z}&tk42dca576db031641be0524ee977ddd04"})});//加载天地图--注记图层va…

百度地图API加载点位

var map new BMap.Map("map");map.centerAndZoom(new BMap.Point(116.403694,39.916263), 19);//添加地图类型控件map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));map.setCurrentCity("北京");map.enableScroll…

点击按钮获得当前点击一行表格数据中的某几列并组成新表格样式

需求大致如下&#xff1a; 每点击一次添加按钮&#xff0c;就添加当前表格中的“名称”、“时间”两列数据到下边的新表格&#xff0c;h5代码先贴上&#xff1a; <table id"tab"><thead><tr><th>名称</th><th>站点</th>&…