我有一个表,要另存为pdfHtml5在数据表中。我正在尝试使桌子变宽,但一直没有成功。如何使用pdfHtml5的样式使表格宽度为100%?
dom: 'Bfrtip',
buttons: [
{
extend: 'collection',
text: '<div class="image"><img src="/Asset/Image/Capture.jpg" alt="" /></div>',
autoClose: true,
buttons: [{
extend: 'pdfHtml5', text: 'Download PDF Document', className: 'pdfdoc', title: podTitle, message: pod.data.pod_description_text + "\n" + "\n" + printDate, customize: function (doc) {
doc.defaultStyle.alignment = 'left';
doc.styles.tableHeader.alignment = 'left';
doc.styles.message = {
alignment: 'center'
}
doc.styles.table = {
alignment: 'center',
width: '100%',
}
/*doc.content[1].table.widths = Array(doc.content[1].table.body[0].length + 1).join('*').split('');*/
doc.pageMargins = [ 80, 20, 80, 20 ];
}
}, { extend: 'excel', text: 'Download Excel Document', className: 'exceldoc' },
]
}
]
});
最佳答案
通过进一步扩展pdfHtml5,您可以指示Buttons扩展所使用的pdfmake库使用100%的宽度。 DataTables论坛的post具有所需的代码:
var tbl = $('.dTable');
var settings={};
settings.buttons = [
{
extend:'pdfHtml5',
text:'Export PDF',
orientation:'landscape',
customize : function(doc){
var colCount = new Array();
$(tbl).find('tbody tr:first-child td').each(function(){
if($(this).attr('colspan')){
for(var i=1;i<=$(this).attr('colspan');$i++){
colCount.push('*');
}
}else{ colCount.push('*'); }
});
doc.content[1].table.widths = colCount;
}
}
];
$('.dTable').dataTable(settings);
请注意,如果仅复制上面代码的定制部分,则必须将
tbl
替换为"#myTable"
或类似的内容。另请参阅相关的GitHub ticket,包括另一个implementation(可能已经过时也可能未过时)。