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

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日

悬赏问题

  • ¥15 如何删除这个虚拟音频
  • ¥50 hyper默认的default switch
  • ¥15 网站打不开,提示502 Bad Gateway
  • ¥20 基于MATLAB的绝热压缩空气储能系统代码咨询
  • ¥15 R语言建立随机森林模型出现的问题
  • ¥20 unity内置语言切换的按钮设置
  • ¥15 中级微观经济学,生产可能性边界问题
  • ¥15 TCP传输时不同网卡传输用时差异过大
  • ¥15 请各位看看我写的属于什么算法,或者有更正确的写法?
  • ¥15 html5 qrcode 扫描器