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版权协议,转载请附上原文出处链接和本声明。