演示效果参考如下：XML转JSON
另一个搭配SQL实现：http://sheetjs.com/sexql/index.html
详细介绍：
1、首先需要导入js
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
2、导入文件框
这里importExcel(this)是方法，名字可以自己定义。
<input type="file"onchange="importExcel(this)" /><div id="demo"></div>
3、js代码
/*FileReader共有4种读取方法：1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。2.readAsBinaryString(file)：将文件读取为二进制字符串3.readAsDataURL(file)：将文件读取为Data URL4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为‘UTF-8‘*/var wb;//读取完成的数据var aa=[];var text=[];var rABS = false; //是否将文件读取为二进制字符串function importExcel(obj) {//导入if(!obj.files) {return;}const IMPORTFILE_MAXSIZE = 1*2048;//这里可以自定义控制导入文件大小var suffix = obj.files[0].name.split(".")[1]if(suffix != ‘xls‘ && suffix !=‘xlsx‘){alert(‘导入的文件格式不正确!‘)return}if(obj.files[0].size/1024 > IMPORTFILE_MAXSIZE){alert(‘导入的表格文件不能大于2M‘)return}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‘});}//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字//wb.Sheets[Sheet名]获取第一个Sheet的数据aa=JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );var u = eval(‘(‘+aa+‘)‘); document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );//获取表格中为address的那列存入text中for(var i=0;i<u.length;i++){text.push(u[i].address);}};if(rABS) {reader.readAsArrayBuffer(f);} else {reader.readAsBinaryString(f);}}导入之后会在id为demo的div中将其全部打印，我这里还有一个就是将我所需要的address那列存入单独的一个text数组中，方便其他方法使用。
1.导入功能实现
下载js-xlsx到dist复制出xlsx.full.min.js引入到页面中
然后通过FileReader对象读取文件利用js-xlsx转成json数据
代码实现(==>示例<==)
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script> ???</head> ???<body> ???????<input type="file"onchange="importf(this)" /> ???????<div id="demo"></div> ???????<script> ???????????/* ???????????FileReader共有4种读取方法： ???????????1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。 ???????????2.readAsBinaryString(file)：将文件读取为二进制字符串 ???????????3.readAsDataURL(file)：将文件读取为Data URL ???????????4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为‘UTF-8‘ ????????????????????????*/ ???????????var wb;//读取完成的数据 ???????????var rABS = false; //是否将文件读取为二进制字符串 ???????????function importf(obj) {//导入 ???????????????if(!obj.files) { ???????????????????return; ???????????????} ???????????????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‘ ???????????????????????}); ???????????????????} ???????????????????//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字 ???????????????????//wb.Sheets[Sheet名]获取第一个Sheet的数据 ???????????????????document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) ); ???????????????}; ???????????????if(rABS) { ???????????????????reader.readAsArrayBuffer(f); ???????????????} else { ???????????????????reader.readAsBinaryString(f); ???????????????} ???????????} ???????????function fixdata(data) { //文件流转BinaryString ???????????????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; ???????????} ???????</script> ???</body></html>2.导出功能的实现
同样引入js-xlsx
代码实现(==>示例<==)
<!DOCTYPE html><html><head> ???<meta charset="UTF-8"> ???<title></title> ???<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script></head><body> ???<button onclick="downloadExl(jsono)">导出</button> ???<!-- ???????????以下a标签不需要内容 ???????--> ???<a href="" download="这里是下载的文件名.xlsx" id="hf"></a> ???<script> ???????var jsono = [{ //测试数据 ???????????"保质期临期预警(天)": "adventLifecycle", ???????????"商品标题": "title", ???????????"建议零售价": "defaultPrice", ???????????"高(cm)": "height", ???????????"商品描述": "Description", ???????????"保质期禁售(天)": "lockupLifecycle", ???????????"商品名称": "skuName", ???????????"商品简介": "brief", ???????????"宽(cm)": "width", ???????????"阿达": "asdz", ???????????"货号": "goodsNo", ???????????"商品条码": "skuNo", ???????????"商品品牌": "brand", ???????????"净容积(cm^3)": "netVolume", ???????????"是否保质期管理": "isShelfLifeMgmt", ???????????"是否串号管理": "isSNMgmt", ???????????"商品颜色": "color", ???????????"尺码": "size", ???????????"是否批次管理": "isBatchMgmt", ???????????"商品编号": "skuCode", ???????????"商品简称": "shortName", ???????????"毛重(g)": "grossWeight", ???????????"长(cm)": "length", ???????????"英文名称": "englishName", ???????????"净重(g)": "netWeight", ???????????"商品分类": "categoryId", ???????????"这里超过了": 1111.0, ???????????"保质期(天)": "expDate" ???????}]; ???????var tmpDown; //导出的二进制对象 ???????function downloadExl(json, type) { ???????????var tmpdata = json[0]; ???????????json.unshift({}); ???????????var keyMap = []; //获取keys ???????????//keyMap =Object.keys(json[0]); ???????????for (var k in tmpdata) { ???????????????keyMap.push(k); ???????????????json[0][k] = k; ???????????} ?????????var tmpdata = [];//用来保存转换好的json ????????????????json.map((v, i) => keyMap.map((k, j) => Object.assign({}, { ???????????????????v: v[k], ???????????????????position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1) ???????????????}))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = { ???????????????????v: v.v ???????????????}); ???????????????var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10 ???????????????var tmpWB = { ???????????????????SheetNames: [‘mySheet‘], //保存的表标题 ???????????????????Sheets: { ???????????????????????‘mySheet‘: Object.assign({}, ???????????????????????????tmpdata, //内容 ???????????????????????????{ ???????????????????????????????‘!ref‘: outputPos[0] + ‘:‘ + outputPos[outputPos.length - 1] //设置填充区域 ???????????????????????????}) ???????????????????} ???????????????}; ???????????????tmpDown = new Blob([s2ab(XLSX.write(tmpWB, ????????????????????{bookType: (type == undefined ? ‘xlsx‘:type),bookSST: false, type: ‘binary‘}//这里的数据是用来定义导出的格式类型 ???????????????????))], { ???????????????????type: "" ???????????????}); //创建二进制对象写入转换好的字节流 ???????????var href = URL.createObjectURL(tmpDown); //创建对象超链接 ???????????document.getElementById("hf").href = href; //绑定a标签 ???????????document.getElementById("hf").click(); //模拟点击实现下载 ???????????setTimeout(function() { //延时释放 ???????????????URL.revokeObjectURL(tmpDown); //用URL.revokeObjectURL()来释放这个object URL ???????????}, 100); ???????} ???????function s2ab(s) { //字符串转字符流 ???????????var buf = new ArrayBuffer(s.length); ???????????var view = new Uint8Array(buf); ???????????for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; ???????????return buf; ???????} ????????// 将指定的自然数转换为26进制表示。映射关系：[0-25] -> [A-Z]。 ???????function getCharCol(n) { ???????????let temCol = ‘‘, ???????????s = ‘‘, ???????????m = 0 ???????????while (n > 0) { ???????????????m = n % 26 + 1 ???????????????s = String.fromCharCode(m + 64) + s ???????????????n = (n - m) / 26 ???????????} ???????????return s ???????} ???</script></body></html>3.使用Python将excel转成Json创建测试数据
代码
import sysimport xlrdimport json ?file =sys.argv[1] data = xlrd.open_workbook(file)table=data.sheets()[0]def haveNoIndex(table): ???returnData=[] ???keyMap=table.row_values(0) ????for i in range(table.nrows):#row ???????tmpmp={} ???????tmpInd=0 ???????for k in table.row_values(i): ????????????tmpmp[keyMap[tmpInd]]=k ???????????tmpInd=tmpInd+1 ?????????returnData.append(tmpmp); ???return json.dumps(returnData,ensure_ascii=False,indent=2)returnJson= haveNoIndex(table) fp = open(file+".json","w",encoding=‘utf-8‘)fp.write(returnJson)fp.close()导出示例的测试数据已经含有表头了如果没有表头可以直接将json中的遍历第一条数据的key创建一个value=key（{key:key}）插入到json第一条就可以了
其他相关教程参考：
Node读写Excel文件探究实践
XCel 项目总结 - Electron 与 Vue 的性能优化
利用 js-xlsx 实现 Excel 文件导入并解析Excel数据成json格式的数据并且获取其中某列数据
原文地址：https://www.cnblogs.com/Anderson-An/p/10164016.html