卿岚 2022-05-08 10:57 采纳率: 76.8%
浏览 237
已结题

bootstrap-table-export 导出的表格怎么修改宽度并居中

img

img


bootstrap-table-export 导出的表格怎么修改宽度并居中
应该是需要修改tableexport中的xlsx和xls导出代码,或者xlsx-core的代码

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-05-08 16:12
    关注

    tableexport用的js-xlsx导出,设置宽度可以配置js-xlsx的ws['!cols']这配置。修改下面的代码,自己处理导出png和Excel格式的文件搞定~

    img


    可以自己去这里看在线示例:

    
                        $('#bootstraptable').bootstrapTable({
                            clickToSelect: true,
                            showExport: true,
                            exportTypes: ['json', 'xml', 'csv', 'sql', 'txt', 'png', 'pdf', 'doc', 'excel', 'xlsx'],
                            exportDataType: "all",
                            pageSize: p,
                            height: h,
                            columns: [
                                { field: "checkbox", title: "选择", align: 'center', checkbox: true, width: 60 },
                                { title: "学号", align: 'center' },
                                { title: "姓名", align: 'center' },
                                { title: "年龄", align: 'center' },
                                { title: "手机号", align: 'center' },
                                { title: "专业班级", align: 'center' },
                                { field: "operate", title: "操作", align: 'center' }
                            ],
                            onRefresh: function () {
                                window.location.reload();
                            },
                            onPostBody: function () {
                                $(window).trigger('resize');
                                //png事件处理
                                $('ul.dropdown-menu li[data-type="png"] a').click(function (e) {
                                    var sel_exportoption = $('#sel_exportoption').val();
                                    //不是全部,使用原来注册的事件导出
                                    if (sel_exportoption != 'all') { return true; }
                                    e.stopPropagation();//导出全部阻止冒泡执行原来绑定的事件
    
                                    $('#bootstraptable').bootstrapTable('refreshOptions', {
                                        pageSize: 100000
                                    });
    
                                    var el = $('.fixed-table-container');
                                    var totalHeight = $('#bootstraptable').height();
                                    var height = el.css('height');
    
                                    el.css('height', totalHeight + 10);
    
                                    $('#bootstraptable').tableExport({
                                        type: 'png',
                                        exportDataType: 'all',
                                        fileName: '学籍信息表',  //文件名称设置
                                    });
    
                                    //还原回原来的高度
                                    el.css('height', height);
    
                                    $('.bootstrap-table').bootstrapTable('refreshOptions', {
                                        pageSize: p
                                    });
    
    
                                    return false
                                });
    
                                //xlsx处理
                                $('ul.dropdown-menu li[data-type="xlsx"] a').click(function (e) {
                                    e.stopPropagation();//阻止插件默认绑定的导出事件
    
    
                                    var sel_exportoption = $('#sel_exportoption').val();
                                    //boostrap-table的数据
                                    var data = $('#bootstraptable').bootstrapTable(sel_exportoption == 'selected' ? 'getSelections' : 'getData', { useCurrentPage: sel_exportoption!='all'});
                                    var cols = $('#bootstraptable').bootstrapTable('getOptions').columns[0].map(i => ({ t: i.title, f: i.field }));//获取配置中的columns
                                    cols.splice(0, 1);//删除复选框列
                                    cols.pop();//删除操作列
    
                                    var excelData = [];//excel数据源
    
                                    excelData.push(cols.map(i => i.t));//表头
    
                                    data.forEach(i => {
                                        var item = [];
                                        cols.forEach(c => {
                                            item.push((i[c.f] || '-').toString())
                                        })
                                        excelData.push(item)
                                    })
    
                                    var wb = XLSX.utils.book_new(), ws = XLSX.utils.aoa_to_sheet(excelData);
                                    //工作簿列宽度设置
                                    var wscols = [
                                        { wch: 10 },
                                        { wch: 10 },
                                        { wch: 10 },
                                        { wch: 20 },
                                        { wch: 30 }
                                    ];
    
                                    ws['!cols'] = wscols;
    
                                    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
                                    XLSX.writeFile(wb, "学籍信息表.xlsx");
    
                                    return false
                                });
                            },
                            exportOptions: {
                                ignoreColumn: ["checkbox", "operate"],  //忽略某一列的索引,可以是数字列数,也可以是field。
                                fileName: '学籍信息表',  //文件名称设置
                            }
                        })
    
    

    api参考:

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 5月9日
  • 已采纳回答 5月8日
  • 创建了问题 5月8日

悬赏问题

  • ¥20 树莓派5做人脸情感识别与反馈系统
  • ¥15 selenium 控制 chrome-for-testing 在 Linux 环境下报错 SessionNotCreatedException
  • ¥15 使用pyodbc操作SQL数据库
  • ¥15 MATLAB实现下列
  • ¥30 mininet可视化打不开.mn文件
  • ¥50 C# 全屏打开Edge浏览器
  • ¥80 WEBPACK性能优化
  • ¥30 python拟合回归分析
  • ¥500 metaswitch 6010
  • ¥15 关于#分类#的问题:不用人工智能的算法