layui，导出带样式的excel

最新推荐文章于 2024-10-15 16:29:04 发布

qq947289507

最新推荐文章于 2024-10-15 16:29:04 发布

阅读量5.4k

点赞数 2

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq947289507/article/details/100282734

版权

js 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何使用layui的excel插件来导出带有复杂样式的Excel文件，包括设置单元格样式、合并单元格以及调整列宽和行高。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此贴必火^_ _^
引入了layui的扩展插件
效果图
在这里插入图片描述
代码

layui.config({
			base: './js/libs/'
		})
layui.use(['excel','jquery'],function(){
			$=layui.$;
			$('#btn').click(exportStyleDemo);
		})

function exportStyleDemo() {
			var excel = layui.excel;
			var data = [
				{ 
					sex: {
						v: '男',
						s: {
							font: { 
								sz: 14, 
								bold: true,
								color:{ 
									rgb: "0000ff" 
								},
							},
							fill: {
								fgColor: {
									rgb: "00ff00" ,
								},
							},
							alignment: {
								horizontal: 'center',
								vertical: 'center'
							}
						}
					},
					'score': 100, 'start': '2019-03-11',
				},
				{sex: '女ggg', 'score': '411403198908118788', 'start': '2019-03-11' },
				{sex: '女1', 'score': 411403198908118788, 'start': '2019-03-11' }
			];
			// 3. 单元格样式优化为正方形
			var colConfig = excel.makeColConfig({
				'A': 150,
				'B': 150,
				'I': 150
			}, 80);
			var rowConfig = excel.makeRowConfig({
				1: 150,
				9: 40
			}, 40);
			var mergeConfig = excel.makeMergeConfig([
				['A2','A3'],
				['C1','C2']
			]);
			excel.exportExcel(data, '批量设置样式.xlsx', 'xlsx', {
				extend: {
					'!cols': colConfig,
					'!rows': rowConfig,
					'!merges': mergeConfig
				}
			});
		}

附上源码
点我下载