# 前端导出并添加样式插件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();
```