JavaScript前端导入excel文件获取JSON对象（解决Excel科学计数法问题）

红太狼 2022-09-07 14:55 429阅读 0赞

出于安全和隐私的原因，JavaScript无法像其他语言（Java，C++等）直接访问用户设备上的文件，需要运行环境才能实现此功能（比如浏览器V8引擎或者NodeJs环境）。解释：可以查阅文档发现JavaScript语言本身无任何读写文件的接口，即使读取文件的File类都要浏览器的配合才能使用  
假如JS通过其他工具尝试读取本地文件（比如Ajax），那也会被浏览器进行跨域拦截  
本文通过浏览器提供的Input输入框让浏览器读取本地文件，再通过FileReader获取文件流，最后通过xlsx来解析得到JSON对象。在此过程中遇到科学计数法导致数据精度丢失的问题，最后查看API文档得以解决  
详细的资料可以查看文章给的地址

## 获取文件 ##

## 获取文件对象并转换为JSON ##

// 读取本地excel文件
    function readWorkbookFromLocalFile(file, callback) {
    	var reader = new FileReader();
    	reader.onload = function(e) {
    		var data = e.target.result;
    		var workbook = XLSX.read(data, {type: 'binary',cellNF:true,cellDates:true,cellText:false});
    		// 此处回调函数解决JS读取是异步非阻塞方法的问题
    		if(callback) callback(workbook);
    	};
    	reader.readAsBinaryString(file);
    }
    
    // 转换为所需对象
    function readWorkbook(workbook) {
    	var sheetNames = workbook.SheetNames; 
    	// 这里我们只读取第一张sheet
    	var worksheet = workbook.Sheets[sheetNames[0]];
    	Object.values(worksheet).forEach(item=>{
    		if(item.t == "n"){
    			item.w = item.v
    		}
    	})
    	// 利用xlsx提供的方法转换
    	var json = XLSX.utils.sheet_to_json(worksheet);
    	
    	// 自定义操作，根据后续业务去实现，此项可以写成回调方便复用接口
    	// transJsonToObj(json)
    }

到此时我们完成了导入功能，可遇到了科学计数法导致精度丢失的问题

通过log打印发现真实数据在read的时候已经丢失，通过查询xlsx的API查找到解决方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTQyNTk1Ng_size_16_color_FFFFFF_t_70_pic_center]  
L2所在的数据显示为科学计数法1.23243E+20,打印workbook 对象发现读取时就时这个值。此次显示因为这次显示将科学计数法还原成Number，可仍然是发生了精度丢失（真实数据后面不是0000）。  
其中解决方法是这两行代码

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>默认值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>cellNF</td> 
   <td>false</td> 
   <td>Save number format string to the .z field</td> 
  </tr> 
  <tr> 
   <td>cellDates</td> 
   <td>false</td> 
   <td>Store dates as type d (default is n)</td> 
  </tr> 
 </tbody> 
</table>

cellNF的作用是将Number原始值放在.v中（记得一开始官方文档是这样描述的）  
但是此时sheet\_to\_json还是不行，log后推测此函数取得是w的值  
于是设置cellDates将日期用date数据结构保存且t属性显示“d”  
并遍历，遇到number类型的数据将v的值赋给w  
这样就达到效果了

var workbook = XLSX.read(data, {type: 'binary',cellNF:true,cellDates:true,cellText:false});
    Object.values(worksheet).forEach(item=>{
    		if(item.t == "n"){
    			item.w = item.v
    		}
    	})

xlsx官方文档：  
https://www.npmjs.com/package/xlsx

参考的blog:  
https://segmentfault.com/a/1190000021436482  
https://www.cnblogs.com/liuxianan/p/js-excel.html

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTQyNTk1Ng_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/fb9c358bcab74c96a4c1d9e797f67db0.png