【js】读取Excel文件（xlsx格式），并用表格（table）展示数据

朱雀 2023-02-10 03:52 30阅读 0赞

#### 1、效果 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTQ3Mjk5_size_16_color_FFFFFF_t_70]

#### 2、下载xlsx.mini.js ####

GitHub上有一个读取Excel文件的项目  
https://github.com/SheetJS/sheetjs  
因为我只是想要读取xlsx文件，故只下载了项目里的一个xlsx.mini.js文件

#### 3、主要代码 ####

<script type="text/javascript" src="js/xlsx.mini.js" ></script>
    <script>
    		var excelFile;
    		// 读取文件的内容
    		function showfile(obj) { 
    			if(!obj.files) { 
    				return;
    			}
    			var f = obj.files[0];
    			var reader = new FileReader();
    			reader.readAsBinaryString(f);
    			reader.onload = function(e) { 
    				var data = e.target.result;
    				excelFile = XLSX.read(data, { 
    					type: 'binary'
    				});
    
    				//展示所有表
    				// for(var i=0;i<excelFile.SheetNames.length;i++){ 
    				// 　document.getElementById("excelFile").innerHTML +=excelFile.SheetNames[i]+"="+JSON.stringify(XLSX.utils.sheet_to_json(excelFile.Sheets[excelFile.SheetNames[i]]))+"<br/>";
    				// 　　　　　　}
    
    				var dataTable1 = "";
    				//只展示第一个表
    				var headers = new Array();
    				var str = XLSX.utils.sheet_to_json(excelFile.Sheets[excelFile.SheetNames[0]])
    				dataTable1+= "<table border='1'><tr>"
    				for(var key in str[0]){ 
    					headers.push(key)  //获取表头
    					dataTable1 += "<th>" + key + "</th>"
    				}
    				dataTable1 += "</tr>"
    				// console.log(headers)
    				
    				//这里显示前五行
    				for(var i=0;i<5;i++){ 
    					// var json = JSON.stringify(str[i])
    					dataTable1 += "<tr>"
    					var json = str[i]
    					for( var j=0;j<headers.length;j++){ 
    						dataTable1 += "<td>" + json[headers[j]] + "</td>";
    					}
    					dataTable1 += "</tr>"<br/>";
    				}
    
    				dataTable1 += "</table>"
    				document.getElementById("excelFile").innerHTML = dataTable1
    
    			}
    		}
    	</script>
    
    <div class="up_btn">
    <input type="file" id="xFile" name="" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onchange="showfile(this)"></div>
    
    <div id="excelFile"></div>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTQ3Mjk5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200519230013951.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTQ3Mjk5,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，30人围观）

还没有评论，来说两句吧...

相关阅读

相关解析读取Excel文件（.xls .xlsx）

在日常的开发过程中，经常需要使用Excel文件来进行数据的导入或导出。在导入后，需解析数据，最后插入到数据库中。在Java技术生态圈中，可以进行Excel文件处理的主流技

左手的ㄟ右手/ 2023年09月27日 16:38/ 0 赞/ 17 阅读

相关使用js-xlsx将后端返回数据导出为excel(.xlsx格式)

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp

小鱼儿/ 2023年03月13日 06:51/ 0 赞/ 5 阅读

相关【js】读取Excel文件（xlsx格式），并用表格（table）展示数据

1、效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

朱雀/ 2023年02月10日 03:52/ 0 赞/ 31 阅读

相关通过js将table表格数据下载为Excel表格

1.创建用于下载数据的excel\_create.jsp页面 <%@ page contentType="text/html; charset=utf-8" %>

约定不等于承诺〃/ 2022年07月15日 05:17/ 0 赞/ 508 阅读

相关读取excel表格数据

例如，我们要读取的表格如图， ![Center][] 操作excel表格需要的jar包，下载地址：[excel表格需要的jar包下载][excel

矫情吗；*/ 2022年07月14日 13:58/ 0 赞/ 373 阅读

相关读取excel表格数据

例如，我们要读取的表格如图， ![Center][] 操作excel表格需要的jar包，下载地址：[excel表格需要的jar包下载][excel

怼烎@/ 2022年07月14日 13:58/ 0 赞/ 323 阅读

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

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

た入场券/ 2022年03月29日 03:46/ 0 赞/ 384 阅读

相关使用js-xlsx库,将表格table导出为Excel表格

npm install xlsjs 引入xlsx.full.min.js 和export.js <body> <button onclick="ta

布满荆棘的人生/ 2022年02月01日 12:25/ 0 赞/ 904 阅读

相关使用js-xlsx库,将数据导出为Excel表格

npm install xlsjs 引入xlsx.full.min.js <body> <button type="button" onclick

╰+攻爆jí腚メ/ 2022年02月01日 12:17/ 0 赞/ 600 阅读

相关利用js-xlsx.js插件实现Excel文件导入并解析Excel数据成json数据格式

<!DOCTYPE html>

深藏阁楼爱情的钟/ 2021年09月29日 03:02/ 0 赞/ 594 阅读