首页 > 建站教程 > JS、jQ、TS >  js-xlsx 格式化单元格正文

js-xlsx 格式化单元格

js-xlsx 格式化单元格是在单元格数据中添加一个 key 为 s 的 json 对象。配置如下：
查看代码
打印?
01var datas = {
02    A1: {
03        v: '数据',
04        s: {
05            font: {
06                sz: 14,
07                bold: true,
08                color: { rgb: "FFFFAA00" }
09            },
10            fill: {
11                bgColor: {
12                    indexed: 64
13                },
14                fgColor: {
15                    rgb: "FFFF00"
16                }
17            }
18        }
19    }
20};
单元格样式

样式属性 子属性 取值
fill 填充 patternType 填充方式 "solid" or "none"

fgColor COLOR_SPEC

bgColor 背景颜色 COLOR_SPEC
font 字体格式

name 字体名称

"Calibri" // default

sz 字体大小 "11" // font size in points

color 字体颜色 COLOR_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
alignment 对齐方式

vertical 垂直对齐方式

"bottom" or "center" or "top"

horizontal 水平对齐方式 "bottom" or "center" or "top"

wrapText 文本是否自动换行 true or false

readingOrder 2 // for right-to-left

textRotation Number 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

border 边框

top 上边框 { 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

COLOR_SPEC
填充、字体和边框的颜色被指定为对象，或者：
    { auto: 1} //自动指定值
    { rgb: "FFFFAA00" } //指/定十六进制ARGB值
    { theme: "1", tint: "-0.25"} 为主题颜色和色调值指定整数索引（默认为0）
    { indexed: 64} fill.bgColor 的默认值

BORDER_STYLE
边框样式是一个字符串值，可以使用以下任何一个值：
thin
medium
thick
dotted
hair
dashed
mediumDashed
dashDot
mediumDashDot
dashDotDot
mediumDashDotDot
slantDashDot

合并区域的边界为合并区域内的每个单元指定。因此，要将一个框边框应用到一个合并区域的3x3单元格，需要为8个不同的单元格指定边框样式。如下图：



其中：
    左边边框：需要设置左边三个单元格的左边边框
    右边边框：需要设置右边三个单元格的右边边框
    顶部边框：需要设置顶部三个单元格的顶部边框
    底部边框：需要设置底部三个单元格的底部边框

实例
对 excel 的 C2 单元格进行格式化，设置字体为粗字体、字体大小为14，设置颜色为 #FFAA00，并且设置背景颜色为 #FFFF00。完成代码如下：
查看代码
打印?
001<!DOCTYPE html>
002<html>
003<head>
004    <meta charset='utf-8'>
005    <title>JS-XLSX Demo</title>
006    <script type="text/javascript" src='./xlsx-style/xlsx.full.min.js'></script>
007</head>
008<body>
009  
010<p>使用JS导出Excel表，并且对表格的单元格进行格式化</p>
011<p>
012    <button onclick="exportExcel()">导出Excel</button>
013</p>
014  
015<script type="text/javascript">
016  
017function exportExcel() {
018    var datas = {
019        '!ref': 'A1:D10',
020        A1: { v: '分类' },
021        B1: { v: '编程语言' },
022        C1: { v: '描述信息' },
023        A2: { v:'后端编程' },
024        B2: { v:'Java' },
025        C2: {
026            v:'世界上最好的语言',
027            s:{
028                font: {
029                    sz: 14,
030                    bold: true,
031                    color: { rgb: "FFFFAA00" }
032                },
033                fill: {
034                    bgColor: {
035                        indexed: 64
036                    },
037                    fgColor: {
038                        rgb: "FFFF00"
039                    }
040                }
041            }
042        },
043  
044        A3: { v:'后端编程' },
045        B3: { v:'C#' },
046        C3: { v:'出自微软的手笔，微软的Java' },
047  
048        A4: { v:'后端编程' },
049        B4: { v:'PHP' },
050        C4: { v:'我不是很喜欢的编程语言' },
051  
052        A5: { v:'前端编程' },
053        B5: { v:'JavaScript' },
054        C5: { v:'前端人员必会语言，有了JavaScript才有灵魂' },
055  
056        A6: { v:'操作系统' },
057        B6: { v:'Linux' },
058        C6: { v:'开源的操作系统，适合做服务器' },
059    };
060  
061    var wb = {
062        SheetNames: ['Sheet1'],
063        Sheets: {
064            Sheet1: datas
065        }
066    };
067  
068    var tmpDown = new Blob([
069        s2ab(
070            // 这里的数据是用来定义导出的格式类型
071            XLSX.write(wb, {
072                bookType: 'xlsx',
073                bookSST: false,
074                type: 'binary'
075            })
076        )
077    ], {
078        type: ""
079    });
080    saveAs(tmpDown, "write_num.xlsx");
081}
082  
083function saveAs(obj, fileName) {
084    var tmpa = document.createElement("a");
085    tmpa.download = fileName || "下载";
086    tmpa.href = URL.createObjectURL(obj);
087    tmpa.click();
088    setTimeout(function () {
089        URL.revokeObjectURL(obj);
090    }, 100);
091}
092  
093function s2ab(s) {
094    if (typeof ArrayBuffer !== 'undefined') {
095        var buf = new ArrayBuffer(s.length);
096        var view = new Uint8Array(buf);
097        for (var i = 0; i != s.length; ++i) {
098            view[i] = s.charCodeAt(i) & 0xFF;
099        }
100        return buf;
101    } else {
102        var buf = new Array(s.length);
103        for (var i = 0; i != s.length; ++i) {
104            buf[i] = s.charCodeAt(i) & 0xFF;
105        }
106        return buf;
107    }
108}
109</script>
110</body>
111</html>
实例运行效果如下图：



点击“导出Excel”按钮，将数据导出到 Excel 表格。excel 效果如下图：



注意：该实例不能使用 js-xlsx 库，我们需要到 github / npm 库上面去下载 xlsx-style 库。淘宝 npm 库地址 http://npm.taobao.org/package/xlsx-style
TAGS: js-xlsx