前端导出并添加样式插件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

npm i --save xlsx-style-download

• 具体使用

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

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

const data = [
  {
    userName: '赵嘚住',
    age: 18,
    sex: '男'
  }，
  {
  	userName: '朱的朱',
    age: 16,
    sex: '女'
  }
]

• IHeaderStyle

const headerStyle = {
  fill: {
    fgColor: { rgb: 'F0F0F0' }
  },
  font: {
    sz: 12,
    bold: true
  },
  border: 'thin C0C0C0'
}

• ILineStyle

const lineStyle = [
  {
    // 数据源的索引
    no: 1，
    // 样式
    style: {
    	fill: {
        fgColor: { rgb: 'F0F0F0' }
      },
  		font: {
  			sz: 12,
  			bold: true
  		}
  	}
  }
]

• ICellStyle

const cellStyle = {
  userName: {
    line: [
      {
        // 数据源的索引
        no: 1，
        // 单独样式，可不传
        style: {}
      },
      {
        // 数据源的索引
        no: 2，
        style: {}
      }
    ],
    // userName列选中行都设置成这个样式
    style: {
      fill: {
        fgColor: { rgb: 'F0F0F0' }
      },
  		font: {
  			sz: 12,
  			bold: true
  		}
    }
  }
}

完整示例

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();