Я хочу добавить пользовательский атрибут данных (имя листа данных - в моем случае) в качестве заголовка перед каждой таблицей при экспорте в 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>
Я думаю, что ваш код нуждается только в двух небольших изменениях:
Расстояние:
Вы можете добавить интервал между таблицами, используя поля. Например:
tableContent.push({
table: {
headerRows: 1,
body: rows
},
margin: [ 0, 2, 0, 20 ], // left, top, right, bottom
layout: "lightHorizontalLines",
});
Заголовки:
Вы можете добавить заголовки таблицы, поместив их в свой массив tableContent
перед отправкой данных основной таблицы:
// my new code:
tableContent.push(
{
text: tableArr[index]
}
);
// your existing code:
tableContent.push({
table: {
headerRows: 1,
body: rows
},
// etc...
(У вас уже есть заголовки в вашем массиве tableArr
, поэтому я использовал их.)
Конечный результат:
Конечно, вы можете добавить больше стилей к заголовкам и отрегулировать поля по своему усмотрению.
Я уверен, что есть несколько разных способов решить эту проблему. Но я думаю, что это один из самых простых подходов.
Большое спасибо, ваш ответ дает именно то, что я хочу.
@andrewJames Да, ты прав. это тот же вопрос, который я задавал ранее. Я удаляю свой предыдущий вопрос, так как он не был хорошо объяснен мной.