SheetJS/js-xlsx修改表头

SheetJS/js-xlsx修改表头

我们经常使用到json_to_sheet方法将json数据转化到worksheet（表示excel文件中的一个表）中，最后导出excel表，列头会默认采用数据的键名，但是为了方便查看数据需要一个对应的中文表头。

const data = [
    {
        name: 'jzx',
        age: 17
    },
    {
        name: 'wmp',
        age: 17
    }
]

const fields = [ 'name', 'age' ]
const workSheet = XLSX.utils.json_to_sheet(
    data, 
    { 
        header: fields
    }
)

console.log(workSheet)：

可以看到对象的每个属性名都很有规律，都是字母+数字的组合，字母表示列，数字表示行，行从1开始计数，列从字母A开始，直到Z，超出的依次在后面叠加字母，也就是说第27列应该用字母AA表示，以此类推。

属性值中t表示类型，v是原始值。可以看到的是列表头会用第一行来表示，也就是A1,B1，表头加两行数据，总共3行。

你可以直接替换A1,B1对应的表头名称，但是这在列数增加到几十个的时候很麻烦，对于这样的规律数据用一个循环来处理最好了。

首先需要拿到所有列的字母，得到所有列以后，依次后面加1就是所有的表头字段，然后替换属性值里的v属性即可，这里要用到XLSX.utils.encode_col和XLSX.utils.decode_range方法，以及workSheet的!ref属性。

先来看看workSheet的!ref属性：

workSheet['!ref'])
// A1:B3
// 冒号前是第一个单元格，冒号后是最后一个单元格

XLSX.utils.decode_range方法可以将对应的字母转化为数字：

const range = XLSX.utils.decode_range(ws['!ref'])
// range对象的值：
{
    s: {
        c: 0, // 第一行
        r: 0  // 第一列
    },
    e: {
        c: 1, // 第二列
        r: 2 // 第三行
    }
}

s指的是第一个单元格，c是指列，r是指行，e是最后一个单元格，ok，有了这个对象，我们就知道了这个workSheet的所有列是从数字0到数字1对应的所有字母，最后使用XLSX.utils.encode_col方法，将数字转换为对应的字母就好了，example:

XLSX.utils.encode_col(0) // A  第一列
XLSX.utils.encode_col(26) // AA 第26列
XLSX.utils.encode_col(27) // AB

最后封装一个完整的方法设置表头：

扫描二维码关注公众号，回复： 9259276 查看本文章

// 创建一个worksheet,创建过程中设置表头
function createWs(data, fields, titles) {
    const ws = XLSX.utils.json_to_sheet(
        data, 
        { 
            header: fields
        }
    )
    const range = XLSX.utils.decode_range(ws['!ref'])
    
    for(let c = range.s.c; c <= range.e.c; c++) {
      const header = XLSX.utils.encode_col(c) + '1'
      ws[header].v = titles[ ws[header].v ]
    }
    
    return ws
}

const titles = {
    name: '姓名',
    age: '年龄'
}
const fields = [ 'name', 'age' ]
const data = [
    {
        name: 'jzx',
        age: 17
    },
    {
        name: 'wmp',
        age: 17
    }
]
const ws = createWs(
    data,
    fields,
    titles
)

console.log(ws)

表头已经修改好了。