antd table组件fixed导致 xlsx导出出现重复数据

359 阅读1分钟
    resultsExport() {
        let fileName = '###';
        let et
        let excelleft = document.querySelector(".ant-table-fixed-left"); // 这个是我table表格的类名
        let excelRight = document.querySelector(".ant-table-fixed-right");//同上
        let tr = document.querySelector(".ant-table-scroll tr");
        // 操作行
        let actions = tr.lastChild
        // 拿到所有的行
        let tbody = document.querySelector(".ant-table-scroll tbody").childNodes;
        // 赋值一份查看详情按钮用于添加
        let lastChildBtn
        if(excelleft || excelRight) {
            // 删除固定表格
            document.querySelector('.ant-table-content').removeChild(excelleft);
            document.querySelector('.ant-table-content').removeChild(excelRight);
            tr.removeChild(actions)
            // 删除所有查看详情按钮
            tbody.forEach(item => {
                lastChildBtn = item.lastChild.cloneNode(true)
                item.removeChild(item.lastChild)
            })
            et = XLSX.utils.table_to_book(document.querySelector('#mytable'))
            // 又添加进去
            document.querySelector(".ant-table-content").appendChild(excelleft);
            document.querySelector(".ant-table-content").appendChild(excelRight);
            tr.appendChild(actions)
            // 将查看详情按钮添加进去
            tbody.forEach(item => {
                item.appendChild(lastChildBtn)
            })
        }else {
          et = XLSX.utils.table_to_book(document.querySelector('#mytable'))  
        }
        // 写入数据
        let etout = XLSX.write(et, { bookType: 'xlsx', bookSST: true, type: 'array' });
        try {
            //下载数据
            FileSaver.saveAs(new Blob([etout], { type: 'application/octet-stream' }), fileName + '.xlsx');
        } catch (e) {
            console.log(e, etout);
        }
        return etout;
    },

antd table组件使用fixed属性导致xlsx导出数据出现重复,这是因为fixed属性是通过多个表格覆盖实现的,所以导致出现数据重复。解决办法:F12找到固定列的类名导出之前将其删除,然后再将其添加回去即可。以上是我的解决办法,可以参考自行修改。