使用 xlsx.js 完成前端excel数据导入

xlsx.js 简介

由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xls格式为例官方github地址: github.com/SheetJS/she…

一、引入 js 代码

如图所示：需要注意引入的js路径

二、html 页面

如图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.btn_color{
				color: blue;
				border: blue;
				background-color: yellow;
			}
		</style>
	</head>
	<!-- 此处需要引入的js文件 -->
	<script src="xlsx.js"></script>
	
	<body>
		<input type="file" id="file" style="display: none;"/>
		<button class="btn_color" onclick="importBatch()">批量导入</button>
	</body>
	
</html>

三、excle导入js

			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 excelData = XLSX.utils.sheet_to_json(worksheet);
					
					// 输出导入的excel信息
					console.log(excelData);
				}
				
			// 增加上传文件事件
				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)&&!/\.xlsx$/g.test(f.name)) {
						alert('仅支持读取xls格式或者xlsx格式');
						return;
					}
					readWorkbookFromLocalFile(f, function(workbook) {
						readWorkbook(workbook);
					});
				});

四、测试

测试结果如图：通过js中的 console.log(excelData) 输出了导入的excel数据

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.btn_color{
				color: blue;
				border: blue;
				background-color: yellow;
			}
		</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 excelData = XLSX.utils.sheet_to_json(worksheet);
					
					// 输出导入的excel信息
					console.log(excelData);
				}
				
			// 增加上传文件事件
				document.getElementById('file').addEventListener('change', function(e) {
					var files = e.target.files;
					if (files.length === 0) {
						return;
					}
					var f = files[0];
					//此处支持的格式可以自己设置
					if (!(/\.xlsx$/g.test(f.name))&&!(/\.xls$/g.test(f.name))) {
						alert('仅支持读取xls格式或者xlsx格式');
						return;
					}
					readWorkbookFromLocalFile(f, function(workbook) {
						readWorkbook(workbook);
					});
				});
		</script>
	</body>
	
</html>