使用table2excel导出不规则table

项目需要导出不规则数据,根据他的js改完后,发现table的列并未对齐,
所以想了一下,一般合并单元格有两种,一种是自身合并,一种是依据其他列合并,这两种结合使用才能让表格完美呈现,贴下代码:一个是根据自身,一个是根据前列
function mergeCells(data,fieldName,colspan,target){

    //声明一个map计算相同属性值在data对象出现的次数和

    var sortMap = {};

    for(var i = 0 ; i < data.length ; i++){

        for(var prop in data[i]){

            if(prop == fieldName){

                var key = data[i][prop]

                if(sortMap.hasOwnProperty(key)){

                    sortMap[key] = sortMap[key] * 1 + 1;

                } else {

                    sortMap[key] = 1;

                }

                break;

            }

        }

    }

    for(var prop in sortMap){

        // console.log(prop,sortMap[prop])

    }

    var index = 0;

    for(var prop in sortMap){

        var count = sortMap[prop] * 1;

        $(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: colspan, rowspan: count});

        index += count;

    }

}

根据其他列:
function mergeOtherCells(data, fieldName,otherName, colspan, target) {
var sort = Array();
var num = 1;
for (var i = 0; i < data.length - 1; i++) {

        for ( var prop in data[i]) {

            if (prop == fieldName) {

                if (data[i][prop] == data[i + 1][prop]) {

                    num++;

                    if (i == data.length - 2) {

                        sort.push(num);

                    }

                } else {

                    sort.push(num);

                    num = 1;

                }

                break;

            }

        }

    }

    var index = 0;

    for (var j = 0; j < sort.length; j++) {

        var count = sort[j];

        $(target).bootstrapTable('mergeCells', {

            index : index,

            field : otherName,

            colspan : colspan,

            rowspan : count,

        });

        index += count;

    }

};
如何导出不规则table呢???
使用table2excel,js 网上有很多,自行下载,初始化方法
  $("#bootstrap-table").table2excel({
            exclude: ".noExl",
            name: d2+"_"+d1+"统计汇总",
            // columns: 10,//指定不导出列  实例:columns: "0,1,2,3",下标从0开始,代表不导出第一列--第四列
            filename: d2+"_"+d1+"统计汇总",
            fileext: ".xls",
            exclude_img : true,
            exclude_links : true,
            exclude_inputs : true
        })

注意事项:上述两个合并单元格的方法本色纸是加上列宽,然后隐藏不需要显示的列,而导出方法会将display为none的元素导出,导致excel显示错误,
因此,通过获取到当前所有为display为none的元素,代码如下:
onLoadSuccess: function (data) {
var table = KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲bootstrap-table…(“td:hidden”);
$.each(tdList,function(i,object){
$(object).addClass(‘noExl’);
})
},
解释下代码:这个函数是table数据全部加载完毕后触发的函数,最下面就是获取隐藏元素,然后给他加上noExl,为什么加这个呢?table2excel.js默认会将加上此类的元素排除掉,也就不会导出来,这样完毕后,导出逇表格也正常了,如果想要导出的表格样式好看,可以修改源码,如果觉得这篇文章对你有用的话,点个赞把,可以留言告诉我你不懂的地方,我会一一解答。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用SheetJS导出Excel表格时,有时会出现不规则的表格,导致数据无法居中。在这种情况下,出现的问题通常是表格中不同列的宽度不同,或者表格中的数据行高不同。下面是一些解决该问题的方法: 1. 对于列宽不同的表格,可以使用以下代码均衡列宽,确保数据居中: // 对于每一列 for (var i = 0; i < ws['!cols'].length; i++) { // 如果列宽不存在,则将列宽设置为默认值 if (!ws['!cols'][i]) { ws['!cols'][i] = {wch: 10}; } // 如果列宽小于默认列宽,则将列宽设置为默认列宽 if (ws['!cols'][i].wch < 10) { ws['!cols'][i].wch = 10; } } 2. 对于行高不同的表格,可以使用以下代码调整行高,确保数据居中: // 对于每一行 for (var i = 1; i <= ws['!margins'].bottom; i++) { // 获取所有单元格的高度 var rHeight = []; for (var j = 0; j < ws['!cols'].length; j++) { var cell = ws[XLSX.utils.encode_cell({c: j, r: i})] || {v: ''}; var rH = calculateRowHeights(cell.v, j); rHeight.push(rH); } // 获取最大高度 var maxRH = Math.max.apply(null, rHeight); // 将行高设置为最大高度 ws['!rows'][i] = {hpt: maxRH * 6, hpx: maxRH * 6}; } 3. 可以通过设置单元格的样式来调整单元格中的内容居中: // 获取样式对象 var styles = XLSX.utils.styles; // 创建样式 var style = styles['default']; style.alignment = style.alignment || {}; // 将水平对齐方式设置为“居中” style.alignment.horizontal = 'center'; // 使用样式设置单元格内容居中 var cell = {v: '1', s: style}; // 将单元格添加到工作表中 ws[XLSX.utils.encode_cell({c: 0, r: 0})] = cell; 总之,调整表格的列宽、行高和单元格样式可以使数据居中,确保表格在导出Excel时呈现出良好的可视化效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值