前端使用xlsx-js-style导出Excel文件并修饰单元格样式

xlsx-js-style

• • • 安装
    • 引入
    • 需要导出的数据源
    • 将数据源转成需要的二维数组
    • 定义 Excel 表头
    • 将定义好的表头添加到 body 中
    • 将二维数组转成 sheet
    • !merges 设置单元格合并
    • !cols 设置列宽
    • !rows 设置行高
    • 创建虚拟的 workbook
    • 向 workbook 中添加 sheet
    • 导出 workbook
    • 完整示例
    • 效果图
    • 总结

安装

导出 excel 较常见的 js 库是之一是 xlsx，xlsx 算是基础版本，不能对单元格进行样式（对齐方式、文字颜色、背景颜色等）的修饰，如果需要修饰单元格，可使用 xlsx-js-style

npm install xlsx-js-style

• 1

引入

import XLSXS from 'xlsx-js-style';

• 1

需要导出的数据源

// 一般我们拿到的是从接口中请求到的对象数组，在使用是需要转成二维数组，下面有介绍 const data = [ { name: '商品01', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 }, { name: '商品02', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 }, { name: '商品03', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 }, ]

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

将数据源转成需要的二维数组

const body = data.map(x => (