纯前端利用 js-xlsx 之单元格样式(4)

本文档详细介绍了如何使用xlsx-style模块为Excel文件中的单元格设置样式,包括字体、颜色、边框等,并提供了示例代码展示如何创建带有样式的Excel文件及合并单元格。

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

xlsx-style 说明文档

0.单元格样式:

样式属性子属性取值
fillpatternType "solid" or "none"
fgColorCOLOR_SPEC
bgColorCOLOR_SPEC
fontname "Calibri" // default
sz "11" // font size in points
colorCOLOR_SPEC
bold true or false
underline true or false
italic true or false
strike true or false
outline true or false
shadow true or false
vertAlign true or false
numFmt "0" // integer index to built in formats, see StyleBuilder.SSF property
"0.00%" // string matching a built-in format, see StyleBuilder.SSF
"0.0%" // string specifying a custom format
"0.00%;\\(0.00%\\);\\-;@" // string specifying a custom format, escaping special characters
"m/dd/yy" // string a date format using Excel's format notation
alignmentvertical "bottom" or "center" or "top"
horizontal "bottom" or "center" or "top"
wrapText true or false
readingOrder 2 // for right-to-left
textRotationNumber from 0 to 180 or 255 (default is 0)
90 is rotated up 90 degrees
45 is rotated up 45 degrees
135 is rotated down 45 degrees
180 is rotated down 180 degrees
255 is special, aligned vertically
bordertop{ style: BORDER_STYLE, color: COLOR_SPEC }
bottom{ style: BORDER_STYLE, color: COLOR_SPEC }
left{ style: BORDER_STYLE, color: COLOR_SPEC }
right{ style: BORDER_STYLE, color: COLOR_SPEC }
diagonal{ style: BORDER_STYLE, color: COLOR_SPEC }
diagonalUp true or false
diagonalDown true or false

1.下载xlsx-style

npm install xlsx-style

xlsx-style核心模块 在 你安装路径\node_modules\xlsx-style\dist

2.示例代码

复制出 文件xlsx.full.min.js

编写示例代码:


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>示例</title>
</head>

<body>
    <script src="./xlsx.full.min.js"></script>
    <script>
        function saveAs(obj, fileName) {
            var tmpa = document.createElement("a");
            tmpa.download = fileName || "下载";
            tmpa.href = URL.createObjectURL(obj);
            tmpa.click();
            setTimeout(function () {
                URL.revokeObjectURL(obj);
            }, 100);
        }
        var jsono = [{
            "id": 1, "合并的列头1": "数据11", "合并的列头2": "数据12", "合并的列头3": "数据13", "合并的列头4": "数据14",
        }, {
            "id": 2, "合并的列头1": "数据21", "合并的列头2": "数据22", "合并的列头3": "数据23", "合并的列头4": "数据24",
        }];
        const wopts = { bookType: 'xlsx', bookSST: true, type: 'binary', cellStyles: true };
        function downloadExl(json, type) {
            var tmpdata = json[0];
            json.unshift({});
            var keyMap = []; //获取keys
            for (var k in tmpdata) {
                keyMap.push(k);
                json[0][k] = k;
            }
            var tmpdata = [];//用来保存转换好的json 
            json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
                v: v[k],
                position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
            }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
                v: v.v
            });
            var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10
            tmpdata["B1"].s = { font: { sz: 14, bold: true, color: { rgb: "FFFFAA00" } }, fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "FFFF00" } } };//<====设置xlsx单元格样式
            tmpdata["!merges"] = [{
                s: { c: 1, r: 0 },
                e: { c: 4, r: 0 }
            }];//<====合并单元格 
            var tmpWB = {
                SheetNames: ['mySheet'], //保存的表标题
                Sheets: {
                    'mySheet': Object.assign({},
                        tmpdata, //内容
                        {
                            '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域
                        })
                }
            };
            tmpDown = new Blob([s2ab(XLSX.write(tmpWB,
                { bookType: (type == undefined ? 'xlsx' : type), bookSST: false, type: 'binary' }//这里的数据是用来定义导出的格式类型
            ))], {
                    type: ""
                });
            saveAs(tmpDown, "这里是下载的文件名" + '.' + (wopts.bookType == "biff2" ? "xls" : wopts.bookType));
        }
        function getCharCol(n) {
            let temCol = '',
                s = '',
                m = 0
            while (n > 0) {
                m = n % 26 + 1
                s = String.fromCharCode(m + 64) + s
                n = (n - m) / 26
            }
            return s
        }
        function s2ab(s) {
            if (typeof ArrayBuffer !== 'undefined') {
                var buf = new ArrayBuffer(s.length);
                var view = new Uint8Array(buf);
                for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
                return buf;
            } else {
                var buf = new Array(s.length);
                for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
                return buf;
            }
        }
    </script>
    <button onclick="downloadExl(jsono)">导出</button>
</body>

</html>

效果示例:

img_907e97641a18ba2d7d1754c61f20a94d.gif

### 使用 `xlsx-js-style` 实现 Excel 单元格合并 为了在前端使用 `xlsx-js-style` 库实现 Excel 的单元格合并,可以按照以下方法操作: 安装所需的库可以通过命令行执行如下指令完成[^1]。 ```bash npm install xlsx-js-style ``` 接下来,在 JavaScript 或 Vue.js 项目中引入该库,并准备要导出的数据源。假设有一个简单的二维数组作为数据源,其中包含一些销售记录的信息。 定义好表头之后,将其加入到主体内容之中形成完整的表格结构。这里的关键在于通过配置项来指定哪些区域内的单元格应该被合并显示。具体来说就是利用 `!merges` 属性来进行设置[^2]。 下面是一个具体的例子展示如何创建带有合并单元格效果的工作簿并最终下载为 `.xlsx` 文件: ```javascript import XLSX from 'xlsx-js-style'; // 准备工作区 (Workbook) const wb = { SheetNames: [], Sheets: {}, }; // 构建 sheet 数据 let data = [ ['姓名', '年龄'], ['张三', 20], ['李四', 25], ]; // 添加自定义的合并规则 data.push(['总分']); for(let i=0; i<3;i++){ data[data.length-1].push(''); // 合并后的空白填充 } // 创建 worksheet 并应用样式合并逻辑 var ws = XLSX.utils.aoa_to_sheet(data); ws['!merges'] = [{ s: { r: 2, c: 0 }, e: { r: 2, c: 2 } }]; // 将worksheet 加入 workbook 中 wb.SheetNames.push('Sheet1'); wb.Sheets['Sheet1'] = ws; // 导出文件 XLSX.writeFile(wb, "example.xlsx"); ``` 这段代码首先构建了一个基础的工作薄对象 (`wb`) 一个包含两列标题以及几条记录的一维数组形式的数据集 (`data`) 。接着,添加了一行用于表示“总分”的标签,并故意留出了额外的空间以便后续能够正确地进行跨多列的合并处理。最后一步则是调用了 `utils.aoa_to_sheet()` 方法把原始数据转换成了适用于写入 Excel 文档的标准格式,并指定了特定区域内需要合并的起始(`s`)与结束(`e`)坐标点。整个过程结束后即实现了预期的效果——成功生成了一份具有合并单元格特性的电子表格文档[^5]。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值