卿岚 2022-05-07 22:05 采纳率: 76.8%
浏览 166
已结题

tableExport导出表格是png出现不全,xlsx不居中表格宽度过窄

tableExport导出表格是png出现不全,xlsx不居中表格宽度过窄

img

img

img

img

img

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-05-08 21:41
    关注

    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月7日

悬赏问题

  • ¥15 关于#cesium#的问题:cesium 根据经纬度、高度、方位角、俯仰角和距离求另一点高度
  • ¥15 word脚注设置不起空格符号
  • ¥15 为什么apriori的运行时间会比fp growth的运行时间短呢
  • ¥15 求解密json或者美化
  • ¥15 帮我解决一下膳食平衡的线性规划模型的数据实例
  • ¥40 万年历缺少农历,需要和阳历同时显示
  • ¥250 雷电模拟器内存穿透、寻基址和特征码的教学
  • ¥200 比特币ord程序wallet_constructor.rs文件支持一次性铸造1000个代币,并将它们分配到40个UTXO上(每个UTXO上分配25个代币),并设置找零地址
  • ¥15 关于Java的学习问题
  • ¥15 如何使用chatgpt完成文本分类任务?