【Layui】导出表格，设置列宽

使用layui的excel插件

layui.use(['layer', 'table', 'excel'], function(){

})

设置excle表格导出函数

1. 完整的列宽设置方案

function exportExcel() {
    $.ajax({
        url: 'http://xxx/xxx/xxx/xxx/export',
        data: {
            startTime: ''
        },
        dataType: 'json',
        success: function(res) {
            let exData = res.data;

            // 添加表头
            exData.unshift({
                CJSJ: '创建时间',
                HM: '号码', 
                BZ: '备注'
            });

            // 过滤导出数据
            let data = excel.filterExportData(exData, {
                CJSJ: 'CJSJ',
                HM: 'HM',
                BZ: 'BZ'
            });

            // 设置列宽 - 更精确的控制
            let colConfig = excel.makeColConfig({
                'A': 120,    // 创建时间列
                'B': 150,    // 号码列
                'C': 200     // 备注列
            }, 100); // 默认列宽

            // 导出Excel
            excel.exportExcel(data, '数据表_' + new Date().getTime() + '.xlsx', 'xlsx', {
                extend: {
                    '!cols': colConfig
                }
            });
        },
        error: function(xhr, status, error) {
            layer.msg('导出失败：' + error);
        }
    });
}

2. 自动计算列宽（推荐）

function exportExcel() {
    $.ajax({
        url: 'http://xxx/xxx/xxx/xxx/export',
        data: {
            startTime: ''
        },
        dataType: 'json',
        success: function(res) {
            let exData = res.data;

            // 添加表头
            exData.unshift({
                CJSJ: '创建时间',
                HM: '号码',
                BZ: '备注'
            });

            let data = excel.filterExportData(exData, {
                CJSJ: 'CJSJ',
                HM: 'HM', 
                BZ: 'BZ'
            });

            // 自动计算列宽
            let colConfig = calculateColWidth(data, {
                'A': 'CJSJ', // 列号对应字段名
                'B': 'HM',
                'C': 'BZ'
            });

            excel.exportExcel(data, '数据表_' + formatDate() + '.xlsx', 'xlsx', {
                extend: {
                    '!cols': colConfig
                }
            });
        }
    });
}

// 自动计算列宽函数
function calculateColWidth(data, colMap) {
    let colConfig = {};
    
    Object.keys(colMap).forEach(col => {
        const field = colMap[col];
        let maxLength = 0;
        
        // 遍历数据找到最大长度
        data.forEach(row => {
            const value = row[field] || '';
            const length = value.toString().length;
            if (length > maxLength) {
                maxLength = length;
            }
        });
        
        // 根据字符数设置列宽（大致比例）
        colConfig[col] = Math.max(80, maxLength * 8 + 20);
    });
    
    return excel.makeColConfig(colConfig, 100);
}

// 格式化日期函数
function formatDate() {
    const now = new Date();
    return now.getFullYear() + 
           String(now.getMonth() + 1).padStart(2, '0') + 
           String(now.getDate()).padStart(2, '0') + '_' +
           String(now.getHours()).padStart(2, '0') + 
           String(now.getMinutes()).padStart(2, '0');
}

3. 完整的 Layui 使用示例

layui.use(['jquery', 'layer', 'excel'], function() {
    var $ = layui.$;
    var layer = layui.layer;
    var excel = layui.excel;

    // 绑定导出按钮事件
    $('#exportBtn').on('click', function() {
        exportExcel();
    });

    function exportExcel() {
        layer.msg('正在导出数据...', {icon: 16, time: 0});
        
        $.ajax({
            url: 'http://xxx/xxx/xxx/xxx/export',
            type: 'GET',
            data: {
                startTime: $('#startTime').val(),
                endTime: $('#endTime').val()
            },
            dataType: 'json',
            success: function(res) {
                layer.closeAll();
                
                if (res.code === 0 && res.data) {
                    let exData = res.data;

                    // 添加表头
                    exData.unshift({
                        CJSJ: '创建时间',
                        HM: '号码',
                        BZ: '备注',
                        // 可以继续添加其他字段
                    });

                    // 过滤数据
                    let data = excel.filterExportData(exData, {
                        CJSJ: 'CJSJ',
                        HM: 'HM',
                        BZ: 'BZ'
                    });

                    // 设置列宽
                    let colConfig = excel.makeColConfig({
                        'A': 150, // 创建时间
                        'B': 120, // 号码
                        'C': 250  // 备注（通常需要更宽）
                    }, 120);

                    // 导出文件
                    excel.exportExcel(data, '导出数据_' + new Date().getTime() + '.xlsx', 'xlsx', {
                        extend: {
                            '!cols': colConfig,
                            // 可以添加其他样式配置
                            '!autofilter': { // 添加筛选器
                                x: 0,
                                y: 0,
                                ref: 'A1:C' + (data.length)
                            }
                        }
                    });
                    
                    layer.msg('导出成功！');
                } else {
                    layer.msg(res.msg || '导出数据为空');
                }
            },
            error: function(xhr, status, error) {
                layer.closeAll();
                layer.msg('导出失败：' + error);
            }
        });
    }
});

4. 高级列宽配置

// 更精细的列宽控制
function getAdvancedColConfig() {
    return excel.makeColConfig({
        'A': { // 创建时间列
            width: 160
        },
        'B': { // 号码列
            width: 120
        },
        'C': { // 备注列
            width: 300,
            hidden: false // 可以控制列是否隐藏
        }
    }, {
        width: 100, // 默认列宽
        hidden: false
    });
}

// 或者使用数组形式
function getArrayColConfig() {
    return [
        { width: 160 }, // A列
        { width: 120 }, // B列  
        { width: 300 }  // C列
    ];
}

5. 响应式列宽（根据内容动态调整）

function getDynamicColWidth(data) {
    const config = {};
    const charWidth = 8; // 每个字符的大致宽度
    
    if (data && data.length > 0) {
        const firstRow = data[0];
        Object.keys(firstRow).forEach((key, index) => {
            const col = String.fromCharCode(65 + index); // A, B, C...
            let maxLen = key.length; // 表头长度
            
            // 查找该列数据的最大长度
            data.forEach(row => {
                const val = row[key] ? row[key].toString() : '';
                maxLen = Math.max(maxLen, val.length);
            });
            
            config[col] = Math.max(80, maxLen * charWidth + 20);
        });
    }
    
    return excel.makeColConfig(config, 100);
}