js如何解析excel文件内容并显示成json格式

By | 2020年6月10日

js解析excel文件的需求在某些业务场景下需要用到,而我之所以会用到这么一个需求,是因为最近我在写一个店铺活动设置的功能。而这个功能需要让使用者批量导入商品活动,而我为了让后端减去压力,优化后端执行效率,所以打算现在前端将excel文件解析出来,然后以json形式传至后端,这样后端就少了一步解析excel的步骤了。

而js解析excel的插件是用的SheetJS js-xlsx,官方对这个插件的介绍如下:

各种电子表格格式的解析器和编写器。纯JS洁净室实现来自官方规范、相关文档和测试文件。强调解析和编写的健壮性,跨格式特性与统一JS表示的兼容性,以及ES3/ES5浏览器与IE6的兼容性。
而此插件的兼容性如下:

官方github地址:https://github.com/SheetJS/sheetjs

使用方法:

1、引入js文件:

<script type="text/javascript" src="./js/xlsx.core.min.js"></script>

2、读取excel文件:

2.1、读取本地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'});
		if(callback) callback(workbook);
	};
	reader.readAsBinaryString(file);
}

2.2、读取网络excel文件:

function readWorkbookFromRemoteFile(url, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open('get', url, true);
	xhr.responseType = 'arraybuffer';
	xhr.onload = function(e) {
		if(xhr.status == 200) {
			var data = new Uint8Array(xhr.response)
			var workbook = XLSX.read(data, {type: 'array'});
			if(callback) callback(workbook);
		}
	};
	xhr.send();
}

3、调用读取excel文件方法:

//导入本地excel文件实例
document.getElementById('excelfile').addEventListener('change', function(e){
  var files = e.target.files;
      if(files.length == 0) return;
      var loadding = layer.load(1, {shade: [0.1,'#fff']});
      var f = files[0];
      //正则匹配判断所选择的文件是否为excel文件
      if(!/\.xlsx$/g.test(f.name)) {
	 layer.msg("仅支持读取xlsx格式!");
	      layer.close(loadding);
	      return;
      }
      readWorkbookFromLocalFile(f, function(workbook) {
         layer.close(loadding);
         var sheetNames = workbook.SheetNames; // 工作表名称集合
	 var worksheet = workbook.Sheets[sheetNames[0]]; // 这里只读取第一张sheet
         //将读取的excel内容转换成json格式,并输出
	 var excelJson = XLSX.utils.sheet_to_json(worksheet);
         console.log(excelJson);
      });
});

4、此插件还支持将excel读取输出为其它格式的数据:

XLSX.utils.sheet_to_csv:生成CSV格式
XLSX.utils.sheet_to_txt:生成纯文本格式
XLSX.utils.sheet_to_html:生成HTML格式
XLSX.utils.sheet_to_json:输出JSON格式

发表评论

电子邮件地址不会被公开。 必填项已用*标注