pikaz-excel-js 是项目中已经使用的 Excel 导入导出库。简单的配置一下表头、表格数据就可以完成表格的导出操作了，使用起来非常简单。文档也非常的简单明了，并且有提供简单的参考示例模板：
但是文档中关于单元格样式（cellStyle）的说明就有点 “太简单” 了 👇
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
cellStyle |
单元格样式，每个单元格对象配置具体参数查看下方单元格样式 | object |
– | – |
cell |
单元格名称，支持 excel 单元格名称与数字行列格式，如 'A3' 或 '3-1' |
string |
– | – |
其他属性与表格全局样式设置方式一致
如果没有阅读示例代码，直接跳到文档中的这部分查看配置项就会有点不知道如何书写。
所以其实示例代码中已经有说明了关于单元格样式的配置：
excelExport({
// 表格数据
sheet: [
{
// 表名
sheetName: "水果的产量",
// 表格标题
title: "水果的产量",
// 表头
tHeader: ["季度", "月份", "名称", "A果园产量（万吨）", "B果园产量（万吨）", "总产量合计（万吨）"],
// 数据键名
keys: ["a", "b", "c", "d", "e", "f"],
// 合并项
merges: [ "1-3:1-5", "1-6:1-8", "1-9:1-11", "1-12:1-14", "1-15:3-15"],
// 表格数据
table: [
{ a: "第一季度", b: "一月", c: "番石榴", d: "2", e: "3", f: "5" },
{ a: "", b: "二月", c: "桑葚", d: "3", e: "3", f: "6" },
{ a: "", b: "三月", c: "樱桃", d: "2", e: "2", f: "4" },
],
// 表格全局样式
globalStyle: { font: { sz: 16 } },
// 单元格样式
cellStyle: [
{ cell: "1-1", fill: { fgColor: { rgb: "B0C4DE" } } },
{ cell: "1-3", fill: { fgColor: { rgb: "7FFFAA" } } },
{ cell: "1-6", fill: { fgColor: { rgb: "FFA500" } } },
{ cell: "1-9", fill: { fgColor: { rgb: "F4A460" } } },
{ cell: "1-12", fill: { fgColor: { rgb: "00BFFF" } } },
{ cell: "1-15", fill: { fgColor: { rgb: "C0C0C0" } } },
],
}
]
})所以 cellStyle 属性就是一个对象数组，可配置的样式属性就是和全局样式是一致的。
但是我在项目中配置 cellStyle 的时候，控制台抛出了异常：
[Vue warn]: Error in v-on handler: "TypeError: N[t.cell] is undefined"
found in
---> <ExcelExport>TypeError: N[t.cell] is undefined
exportExcel PikazJsExcel.umd.min.js:19
exportExcel PikazJsExcel.umd.min.js:19
exportExcel PikazJsExcel.umd.min.js:19
exportExcel PikazJsExcel.umd.min.js:19
click PikazJsExcel.umd.min.js:19
VueJS(5)很明显单元格取值的时候出现错误了，因为我使用的是 v1.x 的支持的 cell 的数字行列名称写法： { cell: "1-1", fill: { fgColor: { rgb: "B0C4DE" } } }，但是项目中使用的 pikaz-excel-js 的版本是 0.2.x，并不支持 数字行列格式 （如 3-1），仅支持 Excel单元格名称 （如 A3）。
那么就需要去转换成Excel单元格名称了，但是我又不想自己写一个函数，就去看了一下 v1.x 版本内部是怎么处理的。很快就找到了 numToLetter 这个函数 👉 pikaz-excel-js/src/excelExport/index.js at master · pikaz-18/pikaz-excel-js
/**
* @description: 纯数字转换为excel格式行列合并项
* @param {*} num
* @return {*}
*/
const numToLetter = (merge = "1-1:2-1") => {
const mergeArr = merge.split(":").map(item => {
const [row, column] = item.split("-").map(s => Number(s))
const stringArray = [];
const numToLetters = (num) => {
const result = num - 1;
const first = parseInt(result / 26);
const second = result % 26;
stringArray.push(String.fromCharCode(64 + parseInt(second + 1)));
if (first > 0) {
numToLetters(first);
}
}
numToLetters(row);
return stringArray.reverse().join("") + column;
})
return mergeArr.join(":")
}如果不想升级版本的话，直接复制过来使用就可以处理成期望的结果了。
numToLetter('33-1')
// => "AG1"