纯前端使用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 分钟前
【Flutter_Web】Flutter编译Web第三篇(网络请求篇):dio如何改造方法,变成web之后数据如何处理
前端·网络·flutter
NoneCoder8 分钟前
CSS系列(26)-- 动画性能优化详解
前端·css·性能优化
滚雪球~9 分钟前
@vue/cli启动异常:ENOENT: no such file or directory, scandir
前端·javascript·vue.js
GDAL19 分钟前
vue3入门教程:ref函数
前端·vue.js·elementui
GISer_Jing27 分钟前
Vue3状态管理——Pinia
前端·javascript·vue.js
好开心3342 分钟前
axios的使用
开发语言·前端·javascript·前端框架·html
Domain-zhuo1 小时前
Git常用命令
前端·git·gitee·github·gitea·gitcode
菜根Sec1 小时前
XSS跨站脚本攻击漏洞练习
前端·xss
m0_748257181 小时前
Spring Boot FileUpLoad and Interceptor(文件上传和拦截器,Web入门知识)
前端·spring boot·后端
桃园码工2 小时前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性