SOURCE

console 命令行工具 X clear

                    
>
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);
        //'A1'.split(/\d+/)
        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]});
                                //调整列头顺序
                                //XLSX.utils.sheet_add_aoa(worksheet, [cs], { origin: "A1" });
                                const workbook = XLSX.utils.book_new();
                                console.log(worksheet,workbook);
                                XLSX.utils.book_append_sheet(workbook, worksheet, "sheet");
                                //worksheet["!cols"] = [ { wch: 20 } ];
                                //jsrun在线编辑,sheetjs无法下载xlsx 原因未知
                                XLSX.writeFile(workbook, df+".xlsx", { compression: true });
                                layer.closeAll();
                            });
                        });
                    }
                }
            ]
        });
    }
//[{a:1,b:2},{a:3,b:5}].map(o=> Object.assign({}, ...['a'].map(key => ({[key]: o[key]}))))
//[{a:1,b:2},{a:3,b:5}].map(o=> Object.fromEntries(Object.entries(o).filter(([k])=>k != 'a')))
//导出 https://xlsx.nodejs.cn/docs/getting-started/examples/export/#export-a-file
});
<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>

本项目引用的自定义外部资源