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)

workSheet

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

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

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

首先需要拿到所有列的字母,得到所有列以后,依次后面加1就是所有的表头字段,然后替换属性值里的v属性即可,这里要用到XLSX.utils.encode_colXLSX.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

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

// 创建一个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)

r_worksheet
表头已经修改好了。

GitHub 加速计划 / sh / sheetjs
34.82 K
8 K
下载
📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs
最近提交(Master分支:2 个月前 )
3f44ddd9 - 9 个月前
5b4806bf - 1 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐