xlsx-style-downloadt
Version:
xlsx-style-plugin
347 lines (314 loc) • 9.04 kB
Markdown
# 前端导出并添加样式插件xlsxStyleDownload
> 为了解决前端导出表格时既要添加样式，又要自己做下载的复杂操作。为方便操作，基于xlsx和xlsx-style封装了xlsxStyleDownload工具
## 可设置样式
- 表头的样式
- 行高
- 具体行的样式
- 列的样式
- 列宽
- 具体单元格的样式
## 样式关键字说明
> 这里保留了xlsx-style的命名规范
| Style Attribute | Sub Attributes | Values |
| :-------------- | :------------- | :----------------------------------------------------------- |
| fill | patternType | `"solid"` or `"none"` |
| | fgColor | `COLOR_SPEC` |
| | bgColor | `COLOR_SPEC` |
| font | name | `"Calibri"` // default |
| | sz | `"11"` // font size in points |
| | color | F0F0F0 |
| | bold | `true || false` |
| | underline | `true || false` |
| | italic | `true || false` |
| | strike | `true || false` |
| | outline | `true || false` |
| | shadow | `true || false` |
| | vertAlign | `true || 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"||"center"||"top"` |
| | horizontal | `"bottom"||"center"||"top"` |
| | wrapText | `true || 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||false` |
| | diagonalDown | `true||false` |
## 使用
- 安装XlsxStyleDownload
```shell
npm i --save xlsx-style-download
```
- 具体使用
```javascript
import XlsxStyleDownload from 'xlsx-style-download';
new XlsxStyleDownload({
columns: downloadColumns,
data: downloadData,
headerStyle,
cellStyle,
filename: '导出文件',
lineStyle: totalLineStyle
}).download();
```
## 参数列表
| 参数名 | 说明 | 示例 | 是否必须 | 默认值 |
| ----------- | ---------------- | -------------- | -------- | -------- |
| columns | 列的映射关系 | `IColumns` | Y | |
| data | 导出的数据源 | `IData` | Y | |
| headerStyle | 表头的样式 | `IHeaderStyle` | N | {} |
| cellStyle | 具体单元格的样式 | `ICellStyle` | N | {} |
| lineStyle | 行的样式 | `ILineStyle` | N | [] |
| filename | 文件名 | 导出文件 | N | 导出文件 |
| rowHeight | 行高 | 27 | N | 27 |
参数示例
- IColumns
```javascript
const columns = {
// 键值对应数据的字段
userName: {
// 该字段映射的列头名
name: '用户名',
// 列宽
wpx: 100,
// 边框样式
border:{
bottom: {
style: 'thin',
color: { rgb: 'A0A0A0' }
},
top: {
style: 'thin',
color: { rgb: 'A0A0A0' }
},
left: {
style: 'thin',
color: { rgb: 'A0A0A0' }
},
right: {
style: 'thin',
color: { rgb: 'A0A0A0' }
}
}, // 或者 border: 'thin C0C0C0' 所有边框统一样式
// 对齐方式
alignment: {
vertical: 'center' // 垂直居中对齐
},
// 设置底纹
fill: {
fgColor: { rgb: 'A0A0A0' }
},
// 设置字体样式
font: {
sz: 12, // 字号
bold: true, // 加粗
color: { rgb: "017B52" } // 颜色
},
},
age: {
name: '年龄',
wpx: 120
}，
sex: {
name: '性别',
wpx: 120
}
}
```
- IData
```javascript
const data = [
{
userName: '赵嘚住',
age: 18,
sex: '男'
}，
{
userName: '朱的朱',
age: 16,
sex: '女'
}
]
```
- IHeaderStyle
```javascript
const headerStyle = {
fill: {
fgColor: { rgb: 'F0F0F0' }
},
font: {
sz: 12,
bold: true
},
border: 'thin C0C0C0'
}
```
- ILineStyle
```javascript
const lineStyle = [
{
// 数据源的索引
no: 1，
// 样式
style: {
fill: {
fgColor: { rgb: 'F0F0F0' }
},
font: {
sz: 12,
bold: true
}
}
}
]
```
- ICellStyle
```javascript
const cellStyle = {
userName: {
line: [
{
// 数据源的索引
no: 1，
// 单独样式，可不传
style: {}
},
{
// 数据源的索引
no: 2，
style: {}
}
],
// userName列选中行都设置成这个样式
style: {
fill: {
fgColor: { rgb: 'F0F0F0' }
},
font: {
sz: 12,
bold: true
}
}
}
}
```
## 完整示例
```javascript
import XlsxStyleDownload from 'xlsx-style-download';
// 定义通用样式
const commonStyle = {
border: 'thin C0C0C0',
font: {
sz: 12, // 字号
bold: true, // 加粗
color: { rgb: "017B52" } // 颜色
},
alignment: {
vertical: 'center' // 垂直居中对齐
}
}
// 列
const columns = {
// 键值对应数据的字段
userName: {
// 该字段映射的列头名
name: '用户名',
// 列宽
wpx: 100,
// 设置底纹
fill: {
fgColor: { rgb: 'A0A0A0' }
},
...commonStyle
},
age: {
name: '年龄',
wpx: 120,
...commonStyle
}，
sex: {
name: '性别',
wpx: 120,
...commonStyle
}
}
// 数据源
const data = [
{
userName: '赵嘚住',
age: 18,
sex: '男'
}，
{
userName: '朱的朱',
age: 16,
sex: '女'
}
]
// 表头样式
const headerStyle = {
fill: {
fgColor: { rgb: 'F0F0F0' }
},
...commonStyle
}
// 行样式
const lineStyle = [
{
// 数据源的索引
no: 1，
// 样式
style: {
fill: {
fgColor: { rgb: 'F0F0F0' }
},
...commonStyle
}
}
]
// 单元格样式
const cellStyle = {
userName: {
line: [
{
// 数据源的索引
no: 0，
// 单独样式，可不传
style: {}
},
],
// userName列选中行都设置成这个样式
style: {
fill: {
fgColor: { rgb: 'F0F0F0' }
},
font: {
sz: 16,
color: {rgb: '005500'},
blod: true
}
}
}
}
// 执行导出
new XlsxStyleDownload({
columns,
data,
headerStyle,
cellStyle,
filename: '我是被美化的表格',
lineStyle
}).download();
```