纯前端使用xlsx-js-style实现带样式表格导出(手把手教程版)

前言

最近接到一个新的需求是纯前端导出并且携带样式,也踩过了许多的坑

1.xlsx开源版只能实现导出不能携带样式

2.xlsx-style可以实现样式,但是弊端是:步骤麻烦、添加多Sheet页也麻烦

3.xlsx-js-style结合xlsx和xlsx-js的免费插件,步骤简单,可实现纯前端带样式和多Sheet页导出

插件引入

1.本文章使用的是xlsx-js-style插件,github地址:www.npmjs.com/package/xls...

官网写的很清楚了,两种下载方式,npm和资源包引入​编辑

表格数据结构

数据结构为一个二维数组,从上到下就是表格每一行的内容,数据层可以用循环把数据给push进去

css 复制代码
let json =[    ["人力资源汇总表"],
    ["姓名", "联系方式"],
    ['老王', '133333333'],
]
let tabale =[    ["离职人员汇总表"],
    ["姓名", "离职原因"],
    ['小王', '中了彩票'],
]

数据格式的转换

ini 复制代码
const wb = XLSX.utils.book_new(); //生成一个新的工作簿
const ws = XLSX.utils.aoa_to_sheet(json) //将二维数组转换成xlsx生成表格的格式
const ws1 = XLSX.utils.aoa_to_sheet(tabale) //将二维数组转换成xlsx生成表格的格式

样式修改

css 复制代码
// 设置公共样式
                    let arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M",] //总共多少列
                    //设置公共样式
                    arr.forEach((item) => {
                        for (let i = 1; i < 7 + json.length; i++) {
                            let str = (item + i).toString();
                            if (ws[str]) {
                                if (i >= 3) {
                                    if (item == "B") {
                                        Object.assign(ws[str], { t: "n" })
                                    } else {
                                        Object.assign(ws[str], { t: "s" })
                                    }
                                }
                                ws[str].s = {
                                    font: {
                                        name: "宋体",
                                        sz: 10,
                                        bold: false,
                                        color: { rgb: "000000" }
                                    },
                                    border: {
                                        top: {
                                            style: 'thin',
                                            color: {
                                                auto: 1
                                            }
                                        },
                                        left: {
                                            style: 'thin',
                                            color: {
                                                auto: 1
                                            }
                                        },
                                        right: {
                                            style: 'thin',
                                            color: {
                                                auto: 1
                                            }
                                        },
                                        bottom: {
                                            style: 'thin',
                                            color: {
                                                auto: 1
                                            }
                                        }
                                    },
                                }
                            }
                        }
                    })
                    
                    ws["A1"].s = { //设置一级标题样式
                        font: {
                            sz: 14,
                            bold: true,
                            color: { rgb: "000000" }
                        },
                        fill: {
                            bgColor: { indexed: 64 },
                            fgColor: { rgb: "ffffff" }
                        },
                        alignment: {
                            horizontal: "center",
                            vertical: "center"
                        },
                    };
                    arr.forEach((item) => { //设置二级标题样式
                        for (let i = 1; i < 7 + json.length; i++) {
                            let str = (item + 2).toString();
                            if (ws[str]) {
                                ws[str].s = {
                                    font: {
                                        name: "宋体",
                                        sz: 10,
                                        bold: true,
                                        color: { rgb: "000000" }
                                    },
                                    border: {
                                        top: {
                                            style: 'thin',
                                            color: {
                                                auto: 1
                                            }
                                        },
                                        left: {
                                            style: 'thin',
                                            color: {
                                                auto: 1
                                            }
                                        },
                                        right: {
                                            style: 'thin',
                                            color: {
                                                auto: 1
                                            }
                                        },
                                        bottom: {
                                            style: 'thin',
                                            color: {
                                                auto: 1
                                            }
                                        }
                                    },
                                    fill: {
                                        bgColor: { indexed: 64 },
                                        fgColor: { rgb: "cccccc" }
                                    },
                                    alignment: {
                                        horizontal: "center",
                                        vertical: "center"
                                    },
                                }
                            }
                        }
                    })
                    ws["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 1 } }]; //合并单元格
                    let clos = []
                    for (let i = 0; i <= 34; i++) { //设置单元格宽度
                        clos.push({
                            wpx: 120
                        })
                    }
                    ws["!cols"] = clos

导出工作簿

arduino 复制代码
XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); //将上面创建好的ws页添加到wb工作簿中表格内名字为Sheet1
XLSX.utils.book_append_sheet(wb, ws1, "Sheet2");//将上面创建好的ws1页添加到wb工作簿中表格内名字为Sheet2
XLSX.writeFile(wb, "example.xlsx");//调用导出api

结束

希望本篇文章有帮助到大家,如果有任何问题可以评论或者私信我~

相关推荐
程序员爱钓鱼2 小时前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel9 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着9 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友10 小时前
什么是API签名?
前端·后端·安全
FIT2CLOUD飞致云12 小时前
AI智能问数能力全面升级,DataEase开源BI工具v2.10.13 LTS版本发布
开源
会豪12 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子12 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶12 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子12 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
FIT2CLOUD飞致云13 小时前
九月月报丨MaxKB在不同规模医疗机构的应用进展汇报
人工智能·开源