js-xlsx前端读取Excel(导入）兼容IE和其他浏览器

最新推荐文章于 2025-06-20 16:41:37 发布

人生几何欢喜就好

最新推荐文章于 2025-06-20 16:41:37 发布

阅读量6.7k

点赞数 7

CC 4.0 BY-SA版权

分类专栏：前端文章标签： js-xlsx 前端 excel

本文链接：https://blog.youkuaiyun.com/JX_YD_XQL/article/details/90263754

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用js-xlsx在前端读取Excel文件的方法，并将其数据展示在网页的table中，特别针对IE浏览器的支持问题进行了处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上看了很多前端导入Excel的文章，都不支持IE,所以打算记录一下。

使用js-xlsx前端读取Excel文件，把读取的表格数据放到页面的table中。例子如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>读取Excel</title>	
   <script src="jquery-2.2.0.js"></script>
   <script src="xlsx.core.min.js"></script>
</head>
<body>
<br/>
<label for="excel-file" class="btn btn-success">导入Excel文件</label>
<input type="file" name="excel-file" id="excel-file"/>
<br>
<table id="context">

</table>

  <script>  
	$('#excel-file').change(function(e) {            
	        try {
	            new Uint8Array([1,2]).slice(0,2);
	        } catch (e) {
	            console.log("[Uint8Array"+e.description+"]这里使用【Array.slice】。");
	            //IE或有些浏览器不支持Uint8Array.slice()方法。改成使用Array.slice()方法
	            Uint8Array.prototype.slice = Array.prototype.slice;
	        }
	        var url=$('#excel-file').val();
	        if(!url){return;}
	        var suffix=url.substring(url.lastIndexOf(".")+1,url.length);
	        if(!(suffix=="xls"||suffix=="xlsx")){
	            return alert("文件类型不正确");
	        }
	        var files = e.target.files;	        
	        var fileReader = new FileReader();
	        fileReader.readAsArrayBuffer(files[0]);// 以二进制方式打开文件
	        fileReader.onload = function(ev) {
	            $('#excel-file').val('');
	            $("#context").html("");
	            try {	                
	            	var data = ev.target.result;
	            	var workbook = XLSX.read(data, { type: 'array'}),
	                persons = [];
	            } catch (e) {
	            	console.error(e);
	                return alert('文件类型不正确!');
	            }
	            
	            //遍历每张表读取
	            for (var sheet in workbook.Sheets) {
	                if (workbook.Sheets.hasOwnProperty(sheet)) {
	                    persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet],{raw:true, header:1}));
	                    
	                    for ( var i = 0; i <persons.length; i++){
	                        var person=persons[i];
	                        var tr='<tr id="tr-'+i+'">';
	                        for (var j = 0; j <person.length; j++){
	                            tr+='<td>'+$.trim(person[j]?person[j]:"")+'</td>';
	                        }
	                        for (var k = 0; k < (6-person.length); k++) {
	                        	tr+='<td></td>';
							}
	                        if(person.length>1){
	                            tr+='<td style="padding:6px;"><a href="javascript:$(\'#tr-'+i+'\').remove();" class="btn btn-danger btn-xs">删除</a></td></tr>';
	                            $("#context").append(tr);
	                        }
	                    }
	                    break;// 如果只取第一张表，就把beak注释取消
	                }
	            }
	        };
	    });

  </script>
</body>
</html>