2021-08-19

Layui使用按钮导入Excel文件

使用扩展 layui 的导出插件 layui.excel

引入excel.js

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>excel导入Excel文件</title>
	<link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
	<script type="text/javascript" src="../layui/layui.js"></script>
	<script type="text/javascript" src="../layui-excel/layui_exts/excel.js"></script>
</head>
<body>
	<div class="layui-container">
		<div class="layui-row">
			<div class="layui-col-md11 layui-col-md-offset1">
				<div class="layui-form-item">
					<div class="layui-form-label">导入操作</div>
					<div class="layui-form-block">
						<button class="layui-btn layui-btn-sm" lay-submit lay-event="add" lay-filter="add">
							<i class="layui-icon layui-icon-add-1"></i>导入excel</button>
						<input type="file" class="layui-btn layui-btn-primary" id="LAY-excel-import-excel" multiple="multiple" style="display:none;">
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	/**
	* 阅读指南:
	* 导出数据测试:搜索 「exportDataByUser」关键字,找到函数即可
	* 导出接口数据:搜索「exportApiDemo」关键字,找到函数即可
	* 导出复杂表头:搜索「exportExtendDemo」关键字,找到函数即可
	* 批量设置样式:搜索「exportStyleDemo」关键字,找到函数即可
	* 简单文件导入:搜索「uploadExcel」可找到导入的处理逻辑,拖拽文件/选择文件回调获取files对象请搜索「#LAY-excel-import-excel」
	* upload模块:搜索「uploadInst」查看使用逻辑,导入相关逻辑同上
	*/

	layui.use(['jquery', 'layer','form', 'upload', 'excel', 'laytpl', 'element', 'code'], function () {
		var $ = layui.jquery;
		var layer = layui.layer;
		var form = layui.form;
		var upload = layui.upload;
		var excel = layui.excel;
		var laytpl = layui.laytpl;
		var element = layui.element;

		form.on('submit(add)', function(e){
			$('#LAY-excel-import-excel').click();
		});

		/**
		* 上传excel的处理函数,传入文件对象数组
		* @param  {FileList} files [description]
		* @return {[type]}       [description]
		*/
		function uploadExcel(files) {
			try {
				excel.importExcel(files, {						
					// 可以在读取数据的同时梳理数据
					/*fields: {
					'id': 'A'
					, 'username': 'B'
					, 'experience': 'C'
					, 'sex': 'D'
					, 'score': 'E'
					, 'city': 'F'
					, 'classify': 'G'
					, 'wealth': 'H'
					, 'sign': 'I'
				}*/
				}, function (data, book) {
					// data: {1: {sheet1: [{id: 1, name: 2}, {...}]}}// 工作表的数据对象
					// book: {1: {Sheets: {}, Props: {}, ....}} // 工作表的整个原生对象,https://github.com/SheetJS/js-xlsx#workbook-object
					// 也可以全部读取出来再进行数据梳理
/*        			data = excel.filterImportData(data, {
						'id': 'A'
						, 'username': 'B'
						, 'experience': 'C'
						, 'sex': 'D'
						, 'score': 'E'
						, 'city': 'F'
						, 'classify': 'G'
						, 'wealth': 'H'
						, 'sign': 'I'
					})*/
					// 如果不需要展示直接上传,可以再次 $.ajax() 将JSON数据通过 JSON.stringify() 处理后传递到后端即可
					/**
					* 2019-06-21 JeffreyWang 应群友需求,加一个单元格合并还原转换
					* 思路:
					* 1. 渲染时为每个cell加上唯一的ID,demo里边采用 table-export-文件索引-sheet名称-行索引-列索引
					* 2. 根据 book[文件索引].Sheets[sheet名称]['!merge'] 参数,取左上角元素设置 colspan 以及 rowspan,并删除其他元素
					*/
					console.log(files);		//导入的Excel文件名
					console.log(data);		//导入的Excel文件内容
				})
			} catch (e) {
				layer.alert(e.message)
			}
		}

		// 监听上传文件的事件
		$('#LAY-excel-import-excel').change(function (e) {
			// 注意:这里直接引用 e.target.files 会导致 FileList 对象在读取之前变化,导致无法弹出文件
			var files = Object.values(e.target.files);	//选择的文件名
			uploadExcel(files);
			// 变更完清空,否则选择同一个文件不触发此事件
			e.target.value = '';
		})
	})
</script>
</html>

版权声明:本文为zjiakou原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。