更新记录

1.0.0（2025-12-27） 下载此版本

renderjs实现app端导出excel

平台兼容性

uni-app(3.6.15)

文档说明

本文详细介绍在 UniApp 项目中，使用 lu-export-excel 插件（基于 ExcelJS 封装）实现 Excel 文件导出，并深度自定义表头样式的方法，包含核心参数、样式配置、完整代码示例、注意事项及常见问题解决。

功能列表

1. 安卓端已测试，iOS请自行测试
2. 实现导出 Excel，支持自定义文件名称、样式、表头等
3. 操作简单，只需引入插件并传入数据即可

目录

1. 功能列表
2. 安装依赖
3. 核心参数说明
4. 导出结果处理方法
5. 表头样式（headerStyle）配置详解
6. 完整代码示例
7. 关键注意事项
8. 常见问题排查

一、安装依赖

本插件需要依赖 xlsx-js-style 库来实现 Excel 文件的导出和样式定制，安装命令如下：

# 使用 pnpm 安装依赖
pnpm add xlsx-js-style

# 或者使用 npm 安装依赖
npm install xlsx-js-style

# 或者使用 yarn 安装依赖
yarn add xlsx-js-style

二、核心参数说明

导出 Excel 时可配置的核心参数如下（均含默认值，按需覆盖即可）：

三、导出结果处理方法

handleExportExcel 方法参数

四、表头样式（headerStyle）配置详解

headerStyle 用于自定义表头单元格的视觉样式，支持字体、背景、对齐、边框等维度配置，以下是完整说明：

3.1 默认样式（未传/传 null 时启用）

若未配置 headerStyle 或传 null，插件会使用以下美观的默认样式：

{
    font: {
        bold: true, // 文字加粗
        italic: false, // 禁用斜体
        sz: 11, // 字号（Excel 原生默认 11 号）
        name: 'Calibri', // 默认字体
        strike: false, // 无删除线
        underline: false, // 无下划线
        color: { rgb: 'FFFFFF' } // 文字颜色（白色）
    },
    fill: {
        fgColor: { rgb: '4472C4' } // 背景色（Office 主题蓝）
    },
    alignment: {
        horizontal: 'center', // 水平居中
        vertical: 'middle' // 垂直居中（ExcelJS 固定值为 middle，非 center）
    },
    border: {
        top: { style: 'thin', color: { rgb: '000000' } },
        bottom: { style: 'thin', color: { rgb: '000000' } },
        left: { style: 'thin', color: { rgb: '000000' } },
        right: { style: 'thin', color: { rgb: '000000' } }
    }
}

3.2 样式属性完整说明

边框样式（style）可选值

五、完整代码示例

以下是 UniApp 页面中实现 Excel 导出的完整可运行代码，包含测试数据生成、样式自定义、导出触发等逻辑：

<template>
    <view class="content">
        <button :prop="excelData" :change:prop="exportExcel.updateData" id="test" @click="exportExcel.startExport" class="btn_cube">app端导出Excel</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            excelData: {
                fileName: 'excel', // 导出保存的文件名称
                sheetName: 'sheet1', // sheet名称
                //是否隐藏生成的文件名称时间，默认false 不隐藏（表格_20251226_230503.xlsx），重名文件会覆盖，可设置为true，自定义文件名
                hideNameTime: false,
                hideHeader: false, // 隐藏表头
                headerList: ['姓名', '年龄', '出生日期', '随机', '备注'], // 不传title，默认使用list的key作为表头
                // 注意：颜色相关的参数不能带#，否则设置不生效
                headerStyle: {
                    font: {
                        bold: true, //加粗
                        italic: true, //斜体
                        sz: 12, //文字大小  默认11
                        name: '华文琥珀', // 字体 默认Calibri
                        strike: true, //删除线
                        underline: true, //下划线
                        color: {
                            rgb: 'ffffff'
                        }
                    },
                    fill: {
                        fgColor: {
                            rgb: '4CAF50'
                        }
                    },
                    alignment: {
                        horizontal: 'center', // 水平样式 "left" or "center" or "right"
                        vertical: 'center' //垂直样式 "top" or "center" or "bottom"
                    }
                    // style： thin：细实线（默认）medium：中粗实线  thick    粗实线 dashed  细虚线  dotted 点线  double  双实线 dashDotDot
                    // dashDot
                    // dashed
                    // dotted
                    // hair
                    // mediumDashDotDot
                    // mediumDashDot
                    // mediumDashed
                    // medium
                    // slantDashDot
                    // thick
                    // thin

                    // border: {
                    //  top: {
                    //      style: 'thin',
                    //      color: {
                    //          rgb: '9417ed'
                    //      }
                    //  },
                    //  bottom: {
                    //      style: 'thin',
                    //      color: {
                    //          rgb: '9417ed'
                    //      }
                    //  },
                    //  left: {
                    //      style: 'thin',
                    //      color: {
                    //          rgb: '9417ed'
                    //      }
                    //  },
                    //  right: {
                    //      style: 'thin',
                    //      color: {
                    //          rgb: '#9417ed'
                    //      }
                    //  }
                    // }
                },
                list: []
            }
        };
    },
    onLoad() {
        // 生成list数据
        this.excelData.list = new Array(1000).fill().map((_, i) => {
            return {
                name: `用户${i}`,
                age: Math.floor(Math.random() * 30) + 20,
                birthday: `user${i}@example.com`,
                rod: `2025-01-01 23:22:44`,
                remark: Date.now() + Math.random().toString(36)
            };
        });
    },
    methods: {
        // 导出结果方法
        handleExportExcel(res) {
            console.log(res);
            uni.showModal({
                title: res.message,
                content: res.filePath
            });
        }
    }
};
</script>
<!-- 引入Excel导出插件（renderjs模块，UniApp APP端专用） -->
<script module="exportExcel" lang="renderjs" src="../../uni_modules/lu-export-excel/js_sdk/index.js"></script>

<style></style>

六、关键注意事项

1. 颜色格式规范：所有 rgb 取值禁止带 # 号（如 ffffff 而非 #ffffff），否则样式配置不生效；