如何用layui-excel实现一键导出Excel？超简单教程让你5分钟上手

如何用layui-excel实现一键导出Excel？超简单教程让你5分钟上手 🚀

【免费下载链接】layui-excel 简单快捷的导出插件，导出仅需一句话 项目地址: https://gitcode.com/gh_mirrors/la/layui-excel

layui-excel是一款简单快捷的前端Excel导出插件，仅需一行代码即可完成表格数据导出。支持多种格式导出、复杂样式设置和跨框架使用，是前端开发者处理Excel导出需求的高效工具。

📌 为什么选择layui-excel？核心功能亮点

layui-excel提供了丰富的功能特性，满足各类导出需求：

• 零依赖快速集成：无需复杂配置，引入即可使用，支持npm、Script标签和layui插件等多种引入方式
• 多格式支持：兼容xls、xlsx、csv等主流文件格式的导入导出
• 大规模数据处理：普通电脑支持9列45万行数据导出，满足企业级数据需求
• 强大样式控制：支持单元格合并、边框设置、字体样式、颜色填充等格式定制
• 跨框架兼容：不仅适用于layui，还支持Vue、React等主流前端框架
• 多sheet导出：支持单个文件中创建多个工作表，便于数据分类管理

📥 3种安装方式，总有一款适合你

1️⃣ npm快速安装（推荐）

适用于Vue/React等现代前端框架：

npm i lay-excel

引入并使用：

import LAY_EXCEL from 'lay-excel';
LAY_EXCEL.exportExcel([[1, 2, 3]], '表格导出.xlsx', 'xlsx');

2️⃣ 直接Script引入（最简单）

无需构建工具，直接在HTML中引入：

<script src="layui_exts/excel.js"></script>
<script>
    // 一句话导出
    LAY_EXCEL.exportExcel([[1, 2, 3]], '表格导出.xlsx', 'xlsx');
</script>

3️⃣ layui插件方式（layui项目首选）

在layui项目中作为插件使用：

layui.config({
    base: 'layui_exts/' // 插件所在目录
}).extend({
    excel: 'excel' // 加载excel模块
});

layui.use(['excel'], function () {
    // 调用导出函数
    layui.excel.exportExcel([[1, 2, 3]], '表格导出.xlsx', 'xlsx');
});

🚀 实战教程：3步实现数据导出

第1步：准备导出数据

从后端API获取数据或使用本地数据：

// 示例数据 - 可以是从接口获取的JSON数据
const data = [
    {name: '张三', age: 28, city: '北京'},
    {name: '李四', age: 32, city: '上海'},
    {name: '王五', age: 25, city: '广州'}
];

第2步：添加表头并梳理数据

使用filterExportData函数整理数据结构：

// 添加表头
data.unshift({name: '姓名', age: '年龄', city: '城市'});

// 梳理数据（确保字段顺序和完整性）
const exportData = excel.filterExportData(data, [
    'name',  // 姓名列
    'age',   // 年龄列
    'city'   // 城市列
]);

第3步：执行导出

调用核心导出函数，生成Excel文件：

// 执行导出
excel.exportExcel({
    sheet1: exportData  // sheet1为工作表名称
}, '用户数据_' + new Date().toLocaleDateString() + '.xlsx', 'xlsx');

效果展示 📊

使用layui-excel导出的Excel文件效果展示

💡 高级技巧：定制你的Excel样式

设置单元格样式

通过filterExportData函数的回调来自定义样式：

data = excel.filterExportData(data, {
    name: function(value, line) {
        return {
            v: value,  // 单元格值
            s: {       // 样式设置
                font: { bold: true, sz: 14 },  // 粗体14号字
                alignment: { horizontal: 'center' },  // 水平居中
                fill: { fgColor: { rgb: "FFFFCC" } }  // 浅黄色背景
            }
        };
    }
});

合并单元格

使用makeMergeConfig函数创建合并配置：

// 创建合并配置：A1-C1合并
const mergeConf = excel.makeMergeConfig([
    {s: {r: 0, c: 0}, e: {r: 0, c: 2}}  // 起始行、起始列、结束行、结束列
]);

// 应用合并配置
excel.exportExcel({sheet1: data}, '合并单元格示例.xlsx', 'xlsx', {
    extend: {sheet1: {'!merges': mergeConf}}
});

导出Layui表格数据

直接导出页面中的layui表格数据：

// 导出当前页面表格数据
function exportTableData() {
    // 获取表格数据
    const tableData = table.cache["demo"]; // demo为表格ID
    
    // 添加表头并导出
    tableData.unshift({id: 'ID', name: '姓名', age: '年龄'});
    excel.exportExcel({sheet1: tableData}, '表格数据.xlsx', 'xlsx');
}

📚 官方资源与文档

• 快速上手指南：docs/快速上手.md
• 函数参考文档：docs/函数列表/
• 样式设置教程：docs/样式设置专区.md
• 常见问题解答：docs/常见问题.md

🛠️ 常见问题解决

Q：导出的数据出现错位怎么办？

A：确保表头与数据的字段顺序完全一致，可使用filterExportData函数统一梳理数据结构。

Q：如何在Vue/React中使用？

A：通过npm安装后，直接import引入即可，使用方法与普通JavaScript项目一致。

Q：支持图片导出吗？

A：支持！通过设置单元格的图片属性实现，支持twoCellAnchor和oneCellAnchor两种锚点类型。

Q：导出大文件时浏览器卡顿怎么办？

A：建议使用CSV格式导出纯数据，或拆分数据到多个sheet中，也可开启压缩选项compression: true。

🎯 总结

layui-excel以其简洁的API设计和强大的功能，彻底简化了前端Excel导出的复杂度。无论是简单的数据导出还是复杂的样式定制，都能通过少量代码快速实现。其跨框架兼容性和丰富的文档资源，使其成为前端开发者处理Excel相关需求的理想选择。

立即尝试layui-excel，让Excel导出从此变得简单高效！只需引入插件，一行代码即可完成数据导出，告别后端依赖和复杂配置。

【免费下载链接】layui-excel 简单快捷的导出插件，导出仅需一句话 项目地址: https://gitcode.com/gh_mirrors/la/layui-excel