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