使用js-xlsx库，前端读取Excel报表文件

た入场券 2022-03-29 03:46 392阅读 0赞

在实际开发中，经常会遇到导入Excel文件的需求，有的产品人想法更多，想要在前端直接判断文件内容格式是否正确，必填项是否已填写

依据HTML5的FileReader，可以使用新的API打开本地文件（参考[这篇文章][Link 1]）

>  *  FileReader.readAsBinaryString(Blob|File)
>  *  FileReader.readAsText(Blob|File, opt\_encoding)
>  *  FileReader.readAsDataURL(Blob|File)
>  *  FileReader.readAsArrayBuffer(Blob|File)

通过 readAsBinaryString 虽然能打开二进制文件（*.pdf、*.doc、\*.xls等），但如若要直接通过JS进行判断这些二进制数据是否符合要求，是不行的  
所以就需要转换，对于Excel文件的内容分析转换，已经有了比较成熟的解决方案：[js-xlsx][]  
其实现方式也用到了上述新特性，看看具体要怎么用

**1. 首先定义一个文件上传项**

**2. 下载js-xlsx的相应的 xlsx.core.min.js 文件后引入**

**3. 监听文件选择，即时打开文件获取表格内容**  
使用XLSX.utils.sheet\_to\_json方法解析表格对象返回相应的JSON数据

$(document).on('change', '#excel-file', function(e) { 
        var files = e.target.files;
        var fileReader = new FileReader();
        var self = this;
        fileReader.onload = function(ev) { 
            try { 
                var data = ev.target.result;
                var persons = []; 										// 存储获取到的数据
                var workbook = XLSX.read(data, {  type: 'binary' }); 	// 以二进制流方式读取得到整份excel表格对象
            } catch (e) { 
                self.parentElement.parentElement.children.excel_data_title.innerText='文件类型不正确';
                var str = '<div style="margin: 0px auto;width: 500px;"><img width="500" height="400" src="images/import_excel_phone_number.png"></div>';
                self.parentElement.parentElement.children.excel_data_table.innerHTML=str;
                return;
            }
            // 表格的表格范围，可用于判断表头是否数量是否正确
            var fromTo = '';
            // 遍历每张表读取
            for (var sheet in workbook.Sheets) { 
                if (workbook.Sheets.hasOwnProperty(sheet)) { 
                    fromTo = workbook.Sheets[sheet]['!ref'];
                    console.log(fromTo);
                    persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    break; // 如果只取第一张表，就取消注释这行
                }
            }
            self.parentElement.parentElement.children.excel_data_title.innerText='excel数据读取成功，请确认数据...';
            var str = '<form id="excel_table_form"><table class="layui-table" id="excel-table-grid" style="width: 100%;"><colgroup> <col width="10%"> <col width="30%"> <col width="10%"></colgroup><thead> <tr> <td>序号（对应表格）</td> <td>手机号</td> <td>操作</td> </tr></thead><tbody>';
            //组装一个table表格
            for(var i=0, len = persons.length; i < len; i++){ 
            	str += '<tr> <td>'+persons[i].__rowNum__+'</td> <td><input type="hidden" name="phone_num" value="'+persons[i][Object.keys(persons[i])[0]]+'" />'+(persons[i][Object.keys(persons[i])[0]].length==11 ? (persons[i][Object.keys(persons[i])[0]]) : (''+persons[i][Object.keys(persons[i])[0]]+'<span style="color:red;">（这不是手机号）</span>'))+'</td> <td οnclick="delete_product_detaion_tr(this)" style="cursor: pointer;"><span style="border-radius: 5px; background-color: #009688; padding: 5px; color: #ffffff;">移除</span></td> </tr>';
            }
            str += '</tbody></table></form>';
            self.parentElement.parentElement.children.excel_data_table.innerHTML=str;	//刷新指定区域的div
        };
        if(undefined == files[0]){ 
        	var str = '<table class="layui-table" id="excel-table-grid" style="width: 100%;"><colgroup> <col width="10%"> <col width="30%"> <col width="10%"></colgroup><thead> <tr> <td>序号（对应表格）</td> <td>手机号（对应第一列）</td> <td>操作</td> </tr></thead><tbody></tbody></table>';
            self.parentElement.parentElement.children.excel_data_table.innerHTML=str;	//刷新指定区域的div
        	return false;
        }
        // 以二进制方式打开文件
        fileReader.readAsBinaryString(files[0]);
    });

上述代码只是简单地获取表格文件的内容，如果要判断，还得根据实际加上一些判断逻辑（`这里组装了一个table表格`）  
js-xlsx只能读取相关的文件，否则会报错

**4.删除表格行级元素方法：**

// 删除元素
    function delete_product_detaion_tr(obj){ 
    	$(obj).parent().remove();  	// 删除当前行
    }

**5.获取确认后（展示）的表格数据，并向后端发起异步请求：**

//提交数据
    function doSumbit(){ 
    	var id = 'AS568G7DF89GH5V694DF'
    	var form = $('#excel_table_form');
    	var data = form.serializeArray();
    	if(data.length>0){ 
    		var arr = new Array();
    		data.forEach(function(v){ 
    			arr.push(v.value);
    		});
    		//TODO 根据框架弹出确认框，执行后续请求操作所
    	    $.ajax({ 
    	    	type: 'POST',
    			url: 'excel/import',
    			data:{ 
    				phoneArr : arr,
    				id: id
    			},
    			dataType: 'json',
    			success:function(res){ 
    				alert("导入成功！");
    			},
    			error : function(json) { 
    				alert('请求失败，请稍后重试！')
    			}
    		});
    	} else { 
    		layer.msg('请导入excel数据...');
    		return false;
    	}
    }

**6.后端接收请求controller方法：**

@RequestMapping(value = "excel/import", method = RequestMethod.POST)
        @ResponseBody
        public JSONResult<ArrayList<String>> getVoucherCode(@RequestParam("phoneArr[]") ArrayList<String> phoneArr, @RequestParam("id") String id){ 
        	System.out.println(id);
        	return JSONResult.newSuccessResult(phoneArr);
        }

**7. 表格文件内容**  
使用一个excel表格，定义了三张表  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlZXN1bjIwMTI_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlZXN1bjIwMTI_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlZXN1bjIwMTI_size_16_color_FFFFFF_t_70 2]  
**8.查看获取到的数据**  
红框部分为三个表项的不同之处，看看代码执行之后的结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlZXN1bjIwMTI_size_16_color_FFFFFF_t_70 3]  
第一个红框是每张表的数据范围，由于js-xlsx这个库自身的问题，它是不会直接获取到表头数据保存起来的，而是直接把表头放到最末级的内容对象里面

可自行逐级看看读取到的表格workbook对象内容：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlZXN1bjIwMTI_size_16_color_FFFFFF_t_70 4]  
如果要判断表头的数量，就需要使用到!ref属性  
在excel文件中，A1:D3中的字母指代列待号，紧接其后的数字指代行号，所以判断表头数量，即为判断列号数量  
比如第一张表有四个表头，所以为A-D;第三张表有五个表头，所以为A-E，如：

if (fromTo[0] === 'A' && fromTo[3] === 'D') { 
         excelIsOk = true;
    }

这只是单单判断表头数量，还得判断表头内容：

console.log(persons);
       var headStr = '姓名,性别,年龄,学校';
       for (var i = 0; i < persons.length; i++) { 
       	if (Object.keys(persons[i]).join(',') !== headStr) { 
           	persons.splice(i, 1);
       	}
       }
       console.log(persons);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlZXN1bjIwMTI_size_16_color_FFFFFF_t_70 5]  
可以看到，倒数第二项的JSON数据，因为表头内容不匹配，被过滤掉了  
这里还得注意的是最后一项，虽然有个表头，但因为没有内容，所以得到的JSON是符合要求的，所以就需要用到那个!ref属性来共同判断表格是否符合要求  
![在这里插入图片描述][20190121170122367.png]  
**9. 其他**  
除此之外，还有更多用法如XLSX.readFile、XLSX.writeFile等，具体就看看[官方文档][js-xlsx]吧

注：以上内容仅提供参考和交流，请勿用于商业用途，如有侵权联系本人删除！

--------------------

## 持续更新中… ##

如有对思路不清晰或有更好的解决思路，欢迎与本人交流，QQ群：273557553，个人微信：  
你遇到的问题是小编创作灵感的来源！

--------------------

[Link 1]: https://www.html5rocks.com/en/tutorials/file/dndfiles/
[js-xlsx]: https://github.com/SheetJS/js-xlsx
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlZXN1bjIwMTI_size_16_color_FFFFFF_t_70]: /images/20220329/ba210f98dc3a4f0ca83492df11856458.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlZXN1bjIwMTI_size_16_color_FFFFFF_t_70 1]: /images/20220329/21c289db94f846f9a4f534b7e6f74f93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlZXN1bjIwMTI_size_16_color_FFFFFF_t_70 2]: /images/20220329/d8ca00c453c742ffbcfe004b1416eecf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlZXN1bjIwMTI_size_16_color_FFFFFF_t_70 3]: /images/20220329/23c3da70b2204eb591dbabc8dc94b7ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlZXN1bjIwMTI_size_16_color_FFFFFF_t_70 4]: /images/20220329/d695b372050c49f9a491bf4981356a75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlZXN1bjIwMTI_size_16_color_FFFFFF_t_70 5]: /images/20220329/4e4f0c04ac394a1ea9a5ef357e5f60a1.png
[20190121170122367.png]: /images/20220329/3b0be92954ba4372b69eaa3217e18d1d.png