使用xlsx.js完成Excel批量数据导入

使用xlsx.js完成Excel批量数据导入

直接上代码

需要引入的 xlsx.js 文件地址 https://gitcode.net/mirrors/SheetJS/sheetjs/-/blob/master/xlsx.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.btn_color{
            
     
				color: blue;
			}
		</style>
	</head>
	<!-- 此处需要引入的js文件 -->
	<script src="xlsx.js"></script>
	<body>
		<input type="file" id="file" style="display: none;"/>
		<button class="btn_color" onclick="importBatch()">批量导入</button>
		
		<script type="text/javascript">
			function importBatch(){
            
     
				document.getElementById(file).click();
			}
			
			// 读取本地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);
			}	
			
			
			function readWorkbook(workbook) {
            
     
					var sheetNames = workbook.SheetNames; // 工作表名称集合
					var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
					var arr = XLSX.utils.sheet_to_json(worksheet);
					
					// 输出下表格总的内容
					console.log(arr);
				}
				
			// 增加上传文件监听事件
				document.getElementById(file).addEventListener(change, function(e) {
            
     
					var files = e.target.files;
					if (files.length === 0) {
            
     
						return;
					}
					var f = files[0];
					if (!/.xls$/g.test(f.name)) {
            
     
						alert(仅支持读取xlsx格式或者xls);
						return;
					}
					readWorkbookFromLocalFile(f, function(workbook) {
            
     
						readWorkbook(workbook);
					});
				});
		</script>
	</body>
	
</html>
经验分享 程序员 微信小程序 职场和发展