胖蔡叨叨叨
你听我说

用xlsx-style玩转Excel导出——像手动操作Excel表格一样用JS操作Excel

JS里比较知名的Excel导出插件sheetJS免费版没办法修改样式,能修改样式的专业版又要收费,所以我们项目中基本都用xlsx-style实现定制化的Excel导出。

该插件实际上是sheetJS延伸出来的,虽然用了很多次了,但对于该该插件涉及的诸多概念、属性都不是很清晰。所以想通过本文的整理,对该插件的相关概念有一个完整的、清晰的认知,以更好地服务后续项目。

一. 插件安装

安装命令如下:

npm i xlsx-style --save

但是安装完使用的时候会报错,解决办法如下:

找到\node_modules\xlsx-style\dist\cpexcel.js,将807行 的 var cpt = require(’./cpt’ + ‘able’);改成 var cpt = cptable即可。

二、概念介绍

(一)workbook Object

即工作簿对象,其常用属性如下:

1.SheetNames : 该属性的值是一个数组,用来存储工作表(sheet)的名称。

2.Sheets : 该属性的值是一个对象,用来存储所有工作表(sheet)对象。

通过Sheets[SheetNames]即可返回对应名称的工作表(sheet)对象。

(二)worsheet Object

即工作表对象,其常用属性如下:

1.每个不以开头的属性,都代表一个单元格。例如A1属性,其值为A1单元格对象。

2.!ref: 该属性的值是一个字符串,用来表示工作表范围,如:“A1:B5”

3.!cols: 该属性的值是一个对象数组,用来设置列宽。如:

[
  { wpx: 100 }, //设置第1列列宽为200像素
  { wch: 50 }, // 设置第2列列宽为30字符
]

4.!merges: 该属性的值是一个对象数组,用来合并单元格。如:

[
  { // 合并B2到D4范围内的单元格
    s: { c: 1, r: 1 }, // start:B2
    e: { c: 3, r: 3 }, // end:D4
  } 
]

5.!freeze: 该属性的值是一个对象,用来冻结单元格(所谓冻结,即鼠标滚动时,该行/该列固定不动)。如:

{
  xSplit: '1', // 冻结列
  ySplit: '1',  // 冻结行
  topLeftCell: 'B2', // 在未冻结区域的左上角显示的单元格,默认为第一个未冻结的单元格。
  state: 'frozen',// 状态为冻结的
}

6.打印相关的属性

!rowBreaks: 该属性的值是一个数组,用来设置行分页。如:[1,3],表示第1行为一页,第2行和第三行为一页,第三行之后为一页

!colBreaks: 该属性的值是一个数组,用来设置列分页。如:[1,3],表示第1列为一页,第2列和第三列为一页,第三列之后为一页

!pageSetup: 该属性的值是一个对象,用来设置缩放大小和打印方向。如:

{ 
  scale: '100',  // 缩放100%
  orientation: 'portrait'  //打印方向为纵向
} 
// orientation 取值如下: 'portrait' - 纵向  'landscape' - 横向

!printHeader: 该属性的值是一个数组,用于分页时设置重复打印的表头,如[1,3],表示需要重复打印的表头为第一行到第三行。

(三)cell Object

即单元格对象。格式如下:

{
  c: C, // C代表列号
  r: R, // r代码行号
}

如果想表示单元格范围,则可以如下表示:

{
  s: S, // S表示第一个单元格对象
  eE, // e表示最后一个单元格对象
}

在工作表对象中设置一个单元对象,是以编码后的单元格为属性,进行设置。例如:

A1 {
  v: '123', 
  t: 's', 
  s: {}

}

v: 单元格的值

t: 单元格的类型,b布尔值、n数字、e错误、s字符串、d日期

s: 单元格的样式

三、编码操作

利用XLSX.Utils对象中的以下方法,可以对单元格和单元格范围进行转化,让我们方便地操作单元格。

//编码行号 
XLSX.utils.encode_row(2); //"3" 
//解码行号 
XLSX.utils.decode_row("2"); //1 /

/编码列标 
XLSX.utils.encode_col(2); //"C" 
//解码列标 
XLSX.utils.decode_col("A"); //0

//编码单元格 
XLSX.utils.encode_cell({ c: 1, r: 1 }); //"B2" 
//解码单元格 
XLSX.utils.decode_cell("B1"); //{c: 1, r: 0} 

//编码单元格范围 
XLSX.utils.encode_range({ s: { c: 1, r: 0 }, e: { c: 2, r: 8 } }); //"B1:C9" 
//解码单元格范围 
XLSX.utils.decode_range("B1:C9"); //{s:{c: 1, r: 0},e: {c: 2, r: 8}}

四、样式设置

设置单元格的样式,就是设置工作表对象中的单元格对象的s属性。这个属性的值也是一个对象。它有五个属性,具体如下:

fill: 填充属性,其子属性如下:

  • patternType: 设置填充时的图案样式,取值如下:none、solid、darkGray、mediumGray、lightGray、gray125、gray0625、darkHorizontal、darkVertical、 darkDown、darkUp、darkGrid、darkTrellis、lightHorizontal、lightVertical、lightDown、lightUp、 lightGrid、lightTrellis
  • bgColor: 设置填充时的图案背景色,是一个对象,取值如:{rgb: “FFFFAA00”}(十六进制ARGB值), 或{theme: “1”}(主题颜色的整数索引,默认是’0’)
  • bgColor: 设置填充时的图案前景色,取值同bgColor属性。

font: 字体属性,其子属性如下:

  • name: 字体名称,值为字符串
  • sz: 字号,值为数字
  • color: 字体颜色,值为对象,同上述bgColor
  • bold: 加粗,值为true 或 fasle
  • underline:下划线,值为true 或 fasle
  • italic:倾斜,值为true 或 fasle
  • italic:倾斜,值为true 或 fasle
  • strike:删除线,值为true 或 fasle
  • vertAlign:上标或下标,值为’superscript’或 ‘subscript’

numFmt: 对数字类型的单元格进行格式化,其值为字符串或数字,如:{ numFmt: ‘yyyy/m/d h:mm’} 或 { numFmt: ‘[=1]”男”;[=0]”女”‘},具体格式化规则参见Excel中设置单元格格式中的数字格式设置。

alignment: 对其属性,其子属下如下:

  • vertical: 垂直对齐,值为”bottom”、”center”或 “top”
  • horizontal: 水平对齐,值为”left”、”center”或 “right”
  • wrapText:自动换行,值为true 或 false
  • readingOrder:文字方向,值为数字0(根据内容决定)、1(从左到有) 或 2(从右到左)
  • textRotation:文本旋转角度,值为数字,0至180或 255(垂直排列) ,默认为0

border: 边框属性,其子属下如下:

  • top:上边框样式,值为对象,如:{style: ‘thin’, color:{rgb: “FFFFAA00”}},其中,style的值集包括:thin、medium、thick、dotted、hair、dashed、mediumDashed、dashDot、mediumDashDot、dashDotDot、mediumDashDotDot、slantDashDot、double
  • bottom: 下边框样式,值同top
  • left: 左边框样式,值同top
  • right: 右边框样式,值同top
  • diagonalUp: 上对角线,值为true 或 fasle
  • diagonalDown: 下对角线,值为true 或 fasle

五、数据输出

xlsx-style有两个输出数据的方法 write 和 writeFile 方法。因为 writeFile方法需要基于 node 环境才可以使用,我们常用的是write方法,所以此处重点介绍以write方法。

XLSX.write(workbook, wopts)

workbook参数即是我们要导出的工作簿对象,上面已经介绍过。

wopt参数也是一个对象,其属性如下:

type: 输出数据类型,值集包括:”base64″、”binary”(二进制字符串)、”buffer”(node.js缓冲区)、”file”(直接创建文件,node环境下有效)

cellDates:是否将日期存储为类型’d'(默认为’n’),默认为fasle

bookType: 工作簿的类型(xlsx、xlsm或 xlsb),默认为xlsx

showGridLines: 是否显示网格线,默认为true

Props: 可以设置为一个对象,存入以下与工作簿相关的信息,其子属性包括:title、subject(主题)、creator(创建者)、keywords(关键字)、description(描述)

赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » 用xlsx-style玩转Excel导出——像手动操作Excel表格一样用JS操作Excel
分享到: 更多 (0)

评论 抢沙发

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏