我想添加自定义的数据属性(数据表名称-在我的情况下)作为标题之前,每一个表,同时将其导出到PDF使用PDFMake。我已经写了一个代码,是在一个PDF工作表中生成多个表的PDF,但我想添加标题之前,每一个表。也有没有差距后,每一个表。所以,想添加这一点。
这就是我的3个PDF表格的样子:
添加我的代码:
$(document).ready( function() {
var tables = document.querySelectorAll('.data-table');
var tableArr = [];
var tableContent = [];
tables.forEach((element, index) => {
$(element).DataTable();
tableArr.push(element.dataset.sheetname);
});
$('#ExportPdf').click(function(){
var config = {
className:"buttons-pdf buttons-html5",
customize:null,
download:"download",
exportOptions:{
format: {
header: function (data, column, node){
if(node.dataset.exportname != null){
return node.dataset.exportname;
}
return data;
},
body: function (data, row, column, node) {
if(node.dataset.exportname != null){
return node.dataset.exportname;
}
return data;
}
}
},
extension:".pdf",
filename:"*",
header:true,
namespace:".dt-button-2",
orientation:"portrait",
pageSize:"A4",
title:"*"
};
var tablesConverted = {};
tables.forEach((element, index) => {
var dataTable = $(element).DataTable();
var data = dataTable.buttons.exportData( config.exportOptions );
var info = dataTable.buttons.exportInfo( config );
var rows = [];
if (config.header) {
rows.push($.map(data.header, function (d) {
return {
text: typeof d === 'string' ? d : d+'',
style: 'tableHeader'
};
}));
}
for (var i=0, ien=data.body.length ; i<ien ; i++ ) {
rows.push($.map(data.body[i], function ( d ) {
return {
text: typeof d === 'string' ? d : d+'',
style: i % 2 ? 'tableBodyEven' : 'tableBodyOdd'
};
}));
}
tableContent.push({
table: {
headerRows: 1,
body: rows,
},
layout: "lightHorizontalLines",
});
});
var doc = {
pageSize: config.pageSize,
pageOrientation: config.orientation,
content: tableContent,
styles: {
tableHeader: {
bold: true,
fontSize: 11,
color: 'white',
fillColor: '#2d4154',
alignment: 'left',
},
tableBodyEven: {},
tableBodyOdd: {
fillColor: '#f3f3f3'
},
tableFooter: {
bold: true,
fontSize: 11,
color: 'white',
fillColor: '#2d4154'
},
title: {
alignment: 'center',
fontSize: 15
},
message: {}
},
defaultStyle: {
fontSize: 10
}
};
if ( config.customize ) {
config.customize( doc, config );
}
pdfMake.createPdf(doc).download('optionalName.pdf');
});
});
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Body -->
<button id="ExportPdf" type="button">Export All</button>
<table class="data-table" data-sheetname="Table 1" id="table-1">
<thead>
<tr>
<th data-exportname="Company">Company1</th>
<th data-exportname="Contact">Contact1</th>
<th data-exportname="Country">Country1</th>
</tr>
</thead>
<tbody>
<tr>
<td data-exportname="Alfreds Futterkiste">Alfreds Futterkiste</td>
<td data-exportname="Maria Anders">Maria Anders</td>
<td data-exportname="Germany">Germany</td>
</tr>
<tr>
<td data-exportname="Centro comercial Moctezuma">Centro comercial Moctezuma</td>
<td data-exportname="Francisco Chang">Francisco Chang</td>
<td data-exportname="Mexico">Mexico</td>
</tr>
<tr>
<td data-exportname="Ernst Handel">Ernst Handel</td>
<td data-exportname="Roland Mendel">Roland Mendel</td>
<td data-exportname="Austria">Austria</td>
</tr>
</tbody>
</table>
<br>
<table class="data-table" data-sheetname="Table 2">
<thead>
<tr>
<th data-exportname="Company">Company</th>
<th data-exportname="Contact">Contact</th>
<th data-exportname="Country">Country</th>
</tr>
</thead>
<tbody>
<tr>
<td data-exportname="Alfreds Futterkiste">Alfreds Futterkiste</td>
<td data-exportname="Maria Anders">Maria Anders</td>
<td data-exportname="Germany">Germany</td>
</tr>
</tbody>
</table>
<br>
<table class="data-table" data-sheetname="Table 3">
<thead>
<tr>
<th data-exportname="Company">Company</th>
<th data-exportname="Contact">Contact</th>
<th data-exportname="Country">Country</th>
</tr>
</thead>
<tbody>
<tr>
<td data-exportname="Centro comercial Moctezuma">Centro comercial Moctezuma</td>
<td data-exportname="Francisco Chang">Francisco Chang</td>
<td data-exportname="Mexico">Mexico</td>
</tr>
<tr>
<td data-exportname="Ernst Handel">Ernst Handel</td>
<td data-exportname="Roland Mendel">Roland Mendel</td>
<td data-exportname="Austria">Austria</td>
</tr>
</tbody>
</table>
1条答案
按热度按时间0wi1tuuw1#
我认为你的代码只需要两个小的修改:
间距:
您可以使用margins在表格之间添加间距。例如:
标题:
在推送主表数据之前,可以通过将表头推送到
tableContent
数组中来添加表头:(You在
tableArr
数组中已经有了标题,所以我使用了它们。)最终结果是:
当然,您可以在标题中添加更多的styles,并根据您的喜好调整边距。
我相信可能有几种不同的方法可以解决这个问题。但我认为这是一种更简单的方法。