tableExport导出表格是png出现不全,xlsx不居中表格宽度过窄
3条回答 默认 最新
- CSDN专家-showbo 2022-05-08 13:41关注
tableexport用的js-xlsx导出,设置宽度可以配置js-xlsx的
ws['!cols']
这配置。修改下面的代码,自己处理导出png和Excel格式的文件搞定~
可以自己去这里看在线示例:学籍管理系统主界面 https://www.w3dev.cn/demo/tableexport.jquery.plugin/$('#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: '学籍信息表', //文件名称设置 } })
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报