xlsx-style-downloadt v0.0.3

前端导出并添加样式插件xlsxStyleDownload

为了解决前端导出表格时既要添加样式，又要自己做下载的复杂操作。为方便操作，基于xlsx和xlsx-style封装了xlsxStyleDownload工具

可设置样式

• 表头的样式
• 行高
• 具体行的样式
• 列的样式
• 列宽
• 具体单元格的样式

样式关键字说明

这里保留了xlsx-style的命名规范

使用

• 安装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();

参数列表

参数示例

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