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

半晨烟宇

已于 2023-03-15 11:44:06 修改

阅读量981

点赞数

分类专栏：随笔记录文章标签： javascript excel

于 2023-03-13 15:48:00 首次发布

本文链接：https://blog.csdn.net/Mr_Gone/article/details/129495993

版权

随笔记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用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>