jQuery 数据表以 100% 宽度导出 PDF
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35642802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DataTables Export PDF with 100% Width
提问by Douglas Cottrell
I am attempting to export my tables to PDF with a 100% width. I have tried the following but I have been unsuccessful
我正在尝试将我的表格导出为 100% 宽度的 PDF。我尝试了以下方法，但没有成功
var settings={};
settings.buttons = [
{
extend:'pdfHtml5',
text:'Export PDF',
orientation:'landscape',
customize : function(doc){
doc.styles['table'] = { width:100% }
}
}
];
$('.dTable').dataTable(settings);
回答by Rabbi Shuki Gur
Found an easier and quicker way to do it.
找到了一种更简单快捷的方法。
{
extend: 'pdf',
customize: function (doc) {
doc.content[1].table.widths =
Array(doc.content[1].table.body[0].length + 1).join('*').split('');
}
}
What happens here is as so:
这里发生的事情是这样的：
doc.content[1].table.widthsis an array of widths for each column, and if each of them is a '*'it means that the table will fit 100% of the page with the columns distributed evenly.
doc.content[1].table.widths是每列的宽度数组，如果它们中的每一个都是 a，'*'则表示表格将 100% 适合页面，并且列均匀分布。
Array(doc.content[1].table.body[0].length + 1)creates an array in the length of all the columns of my table.
Array(doc.content[1].table.body[0].length + 1)在我的表的所有列的长度中创建一个数组。
.join('*')creates a string from all the cells in the array with a '*'for each.
.join('*')从数组中的所有单元格创建一个字符串，每个单元格'*'都有一个。
.split('');splits it back into an array.
.split('');将其拆分回一个数组。
Hope I helped someone along the way.
希望我一路上帮助了某人。
回答by Douglas Cottrell
After digging and digging I found that you simply need to add a width of '*' for each of the columns. I created a simple function in order to create an array based on the number of td tags and included a colspan check.
在挖掘和挖掘之后，我发现您只需要为每一列添加一个 '*' 宽度。我创建了一个简单的函数，以便根据 td 标签的数量创建一个数组，并包含一个 colspan 检查。
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);
回答by Umar Asghar
customize : function(doc){
var colCount = new Array();
var length = $('#reports_show tbody tr:first-child td').length;
console.log('length / number of td in report one record = '+length);
$('#reports_show').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(parseFloat(100 / length)+'%'); }
});
}
Its working in my case. It count the number of data tag in the header. Then it assign 100 / (no of data tags) width to each of the data tag.
它在我的情况下工作。它计算标头中数据标签的数量。然后它为每个数据标签分配 100 /（没有数据标签）宽度。
回答by wayne
var dtTbl = tbl.DataTable({
dom: 'Bt',
buttons: [{
extend: "pdfHtml5",
title: "Report",
customize: function(doc) {
console.log(doc.content)
doc.content.splice(0, 0, {
margin: [12, 0, 0, 12],
alignment: "center",
});
doc.content[2].table.widths = ["*", "*", "*"];
}]
})
This is what I did and it worked. I only have 3 headers so I inserted three asterisks in the table widths.
这就是我所做的，并且奏效了。我只有 3 个标题，所以我在表格宽度中插入了三个星号。
回答by Giuliano Knoke
You can choose the size you want for every column and let them fit the space you need. You just need to make some tuning of this:
您可以为每一列选择所需的大小，并让它们适合您需要的空间。您只需要对此进行一些调整：
"doc.content[1].table.widths = [90,90,90,90,90,90,90,90]; " : {
extend: 'pdfHtml5',
orientation: 'landscape',//orientamento stampa
pageSize: 'A4', //formato stampa
alignment: "center", //non serve a nnt ma gli dice di stampare giustificando centralmente
titleAttr: 'PDF', //titolo bottone
exportOptions: {// quali colonne vengono mandate in stampa (indice posizionale)
columns: [ 1,2,3,4,5,6,7,8 ]
},
customize : function(doc){
doc.styles.tableHeader.alignment = 'left'; //giustifica a sinistra titoli colonne
doc.content[1].table.widths = [90,90,90,90,90,90,90,90]; //costringe le colonne ad occupare un dato spazio per gestire il baco del 100% width che non si concretizza mai
}
}
回答by Josué Leo Moreno
This work excellent... Is adaptable. Edited for me. Change the class (.Datatable) for the id or class of your table
这项工作出色... 适应性强。为我编辑。更改表的 id 或类的类 (.Datatable)
customize: function(doc) {
var colCount = new Array();
var tr = $('.DataTable tbody tr:first-child');
var trWidth = $(tr).width();
var length = $('.DataTable tbody tr:first-child td').length;
$('.DataTable').find('tbody tr:first-child td').each(function() {
var tdWidth = $(this).width();
var widthFinal = parseFloat(tdWidth * 115);
widthFinal = widthFinal.toFixed(2) / trWidth.toFixed(2);
if ($(this).attr('colspan')) {
for (var i = 1; i <= $(this).attr('colspan'); $i++) {
colCount.push('*');
}
} else {
colCount.push(parseFloat(widthFinal.toFixed(2)) + '%');
}
});
doc.content[1].table.widths = colCount;
}
回答by Lukas Correa
You should look for where it says t.table.widthsin the 'pdfmake.js' file and change the value to '*'.
你应该寻找在那里说t.table.widths在“pdfmake.js”文件和值更改为“*”。
t.table.widths="*"
t.table.widths="*"
