关于xlsx导出表格合并单元格边框样式缺失的问题

最新推荐文章于 2024-03-10 22:33:35 发布

陆闲林

最新推荐文章于 2024-03-10 22:33:35 发布

阅读量924

点赞数 17

文章标签：前端 javascript html angular.js

本文链接：https://blog.csdn.net/qq_61907731/article/details/136345892

版权

文章讲述了作者在导出Excel表格时遇到的问题，通过调整合并单元格的代码，确保A到Z的每个字母范围都有边框，解决了一个关于单元格边框存在的问题。

摘要由CSDN通过智能技术生成

在导出excel表的时候遇到了这个问题，看了一下前面几位老哥的方法

老哥1

老哥2

修改一下终于行了，修改后应该可以满足A 到 ZZ，三个就不行了

const sheet = XLSX.utils.aoa_to_sheet(excelHeader);
sheet['!merges'] = merges
this.addRangeBorder(sheet['!merges'], sheet)

addRangeBorder (range, ws) {
    // 合并行边框
    const cols = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    range.forEach(item => {
        for (let i = item.s.c; i <= item.e.c; i++) {
            const num = Math.floor(i / 26)
            let cellX = ''
            if (num < 1) {
                cellX = cols[i]
            } else {
                cellX = cols[num - 1] + cols[i % 26]
            }
            for (let k = item.s.r + 1; k <= item.e.r + 1; k++) {
                if (!Object.keys(ws).includes(cellX + k)) {
                    ws[cellX + k] = {
                        // 这一步很关键，需要让单元格的值存在，才能有边框，没有的话单元格还是没边框
                        t: 's',
                        v: '',
                        s: {
                            border: {
                                top: {
                                    style: 'thin',
                                    color: {rgb: '000000'}
                                },
                                bottom: {
                                    style: 'thin',
                                    color: {rgb: '000000'}
                                },
                                left: {
                                    style: 'thin',
                                    color: {rgb: '000000'}
                                },
                                right: {
                                    style: 'thin',
                                    color: {rgb: '000000'}
                                }
                            }
                        }
                    }
                }

            }
        }
    })
}

效果