console
layui.use(function(){
var $ = layui.$,upload = layui.upload,form = layui.form;
var x_files = {}, flieLis = $('#file-lis'), sheetLis = $('#sheet-lis');
upload.render({
elem: '#id-upload-drag',auto:false, url: '',
accept:'file',acceptMime:'.xlsx',exts:'xlsx',
choose: function(obj){
flieLis.html('<option value="">请选择或搜索-文件</option>');
sheetLis.html('<option value="">请选择或搜索-sheet</option>');
obj.preview(function(index, file, result){
const reader = new FileReader();
let fl = {name:file.name, size:file.sizes, time:layui.util.toDateString(file.lastModifiedDate)};
flieLis.append($('<option></option>').val(index).text(fl.name+' ['+fl.size+'] '+fl.time));
form.render(flieLis);
reader.onload = (e) => {
const workbook = XLSX.read(e.target.result, { type: 'array' });
fl['sheetNames'] = workbook.SheetNames;
fl['sheets'] = workbook.Sheets;
x_files[index] = fl;
};
reader.readAsArrayBuffer(file);
})
}
});
let fid;
form.on('select(files)', function(data){
fid = data.value;let fl;
sheetLis.html('<option value="">请选择或搜索-sheet</option>');
if(!fid || !(fl = x_files[fid])){ return; }
fl.sheetNames.forEach((v,i)=>{
sheetLis.append($('<option></option>').attr('fid',fid).val(v).text(v));
})
form.render(sheetLis);
});
form.on('select(sheets)', function(data){
let sid = data.value,fl, worksheet;
if(!fid || !(fl = x_files[fid])){ return; }
if(!sid || !(worksheet = fl.sheets[sid])){ return; }
let h_ = XLSX.utils.sheet_to_html(worksheet);
layui.code({ elem: '#code-html', code: h_.slice(h_.indexOf('<table>'),h_.indexOf('</body>')) });
let csv = XLSX.utils.sheet_to_csv(worksheet);
layui.code({ elem: '#code-csv', code: csv });
let json_ = XLSX.utils.sheet_to_json(worksheet);
jsonTb(json_,'#table-json')
})
function jsonTb(json_, el){
let ks = Object.keys(json_[0]), cols = [{type:'numbers'}]
.concat(ks.map(v=>{ return {field:v, title:v}; }));
layui.table.render({
elem: el, cellMinWidth: 200, cols: [ cols ],
data: json_, skin: 'line', page: false, toolbar: true,
defaultToolbar: [
'filter', 'exports', 'print',
{ title: '导出xlsx', name: 'xlsx_d', layEvent: 'xlsx-down', icon: 'layui-icon-table',
onClick: function(obj) {
let cs = cols.filter(v=>!v.hide && v.title).map(v=>v.title);
let rows = obj.data.map((o,i)=>
Object.assign({'序号':i+1},...cs.map(key => ({[key]: o[key]}))));
layer.confirm('行:'+rows.length+'<br>列:'+cs.join(','), function(){
let df = '导出-'+layui.util.toDateString(new Date(),'yyyyMMddhhmmss');
layer.prompt({title:'输入文件名',value:df}, function(val, pi, el){
if(val === '') return el.focus();
console.log(val,rows);
const worksheet = XLSX.utils.json_to_sheet(rows,{header:['序号',...cs]});
const workbook = XLSX.utils.book_new();
console.log(worksheet,workbook);
XLSX.utils.book_append_sheet(workbook, worksheet, "sheet");
XLSX.writeFile(workbook, df+".xlsx", { compression: true });
layer.closeAll();
});
});
}
}
]
});
}
});
<div>
<div class="layui-upload-drag" style="display: block;padding:5px" id="id-upload-drag">
<i class="layui-icon layui-icon-upload"></i> 点击或拖拽上传
</div>
</div>
<div class="layui-form layui-row layui-col-space16">
<div class="layui-col-xs8">
<select lay-search="" id="file-lis" lay-filter="files">
<option value="">请选择或搜索-文件</option>
</select>
</div>
<div class="layui-col-xs4">
<select lay-search="" id="sheet-lis" lay-filter="sheets">
<option value="">请选择或搜索-sheet</option>
</select>
</div>
</div>
<hr>
<div style="color:red">jsrun在线编辑,sheetjs无法下载xlsx 原因未知</div>
<div class="layui-tabs layui-tabs-card">
<ul class="layui-tabs-header"> <li>HTML</li> <li>CSV</li> <li>JSON</li> </ul>
<div class="layui-tabs-body">
<div class="layui-tabs-item" id="tab-html" style="overflow:scroll;height:500px;">
<pre class="layui-code" id="code-html" lay-options="{preview:true,layout:['preview','code']}"><h1>html预览</h1></pre>
</div>
<div class="layui-tabs-item" style="overflow:scroll;height:500px;">
<pre class="layui-code" id="code-csv" lay-options="{}">csv预览</pre>
</div>
<div class="layui-tabs-item" style="overflow:scroll;height:500px;">
<table class="layui-hide" id="table-json"></table>
</div>
</div>
</div>