js- xlsx使用过程中遇到的问题

导入--EXCEL

1. 引入js

<script src="https://github.com/SheetJS/sheetjs/blob/github/dist/xlsx.full.min.js"></script>

2 定义上传 input

<input class="position-absolute file-style" type="file" id="lead" accept="xlsx"
                                            onchange="importf(this)">

3. 定义获取和解析 excel 对象的方法

//导入
            var rABS = false; //是否将文件读取为二进制字符串
            var outdata = []

            //导入excel方法
            function importf(obj) {
                if (!obj.files) {
                    return;
                }
                var f = obj.files[0];
                {
                    document.getElementById('lead').value = ''    
                    var reader = new FileReader();
                    // var name = f.name;
                    reader.onload = function (e) {
                        var data = e.target.result;
                        var wb;
                        if (rABS) {
                            wb = XLSX.read(data, {
                                type: 'binary'
                            });
                        } else {
                            var arr = fixdata(data)
                            wb = XLSX.read(btoa(arr), {
                                type: 'base64'
                            });
                        }
                        //outdata是从excel中读取的数据，此处为Array数组类型
                        //注：读取的数据以行为单位，每一行作为一个JS对象，也就是作为Array数组的一个元素，其中，每一行的每一列都是一个属性值(value)，对象的首个键(key)为表格第一行第一列的内容，往后依次为__EMPTY,__EMPTY_1,__EMPTY_2.....
                        // outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
                        outdata.length = 0
                        // outdata = outdata.concat(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: ['plc_street', 'plc_value', 'address'] }));
                        outdata = outdata.concat(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {
                            header: ['plc_street', 'plc_value', 'address'],
                            defval: ''
                        }));
                        outdata.splice(0, 1)
                        readerTable(outdata)

                    };
                    if (rABS) reader.readAsBinaryString(f);
                    else reader.readAsArrayBuffer(f);
                    // importf.value = null;
                }

            };

            function fixdata(data) {
                var o = "",
                    l = 0,
                    w = 10240;
                for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
                o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
                return o;
            }

数据都已经被读取出来,但是发现列标题的key是根据表格的第一行命名并且自动忽略了第一行的内容,但是我并不想要key是中文的,而是需要英文的key以便我后续渲染页面使用,所以接下来就是重命名列标题.

  outdata = outdata.concat(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {
                            header: ['plc_street', 'plc_value', 'address'], 
                            defval: ''
                        }));

xlsx表格，将有效区域的单元格中的其中一个置为了空，上传之后，该单元格不被识别

 outdata = outdata.concat(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {
                            header: ['plc_street', 'plc_value', 'address'], 
                            defval: ''   //将有效区域的空单元格设置default状态
                        }));

使用插件js-xlsx进行前端EXCEL文件上传，点击上传同一个文件会造成二次上传不可点击

解决：因使用的是change事件，如下，二次点击同一个文件，不会触发change，故失败

作者：邸琨