DataTables导出PDF时添加多页脚行的技术求助
问题:DataTables导出PDF时添加多页脚行
我查阅了大量讨论与技术文档却未找到有效方案,希望在DataTables导出PDF时为表格添加更多页脚行。目前已实现Excel导出的多页脚功能,但PDF相关的实现方案缺失。页脚中的'Totale'行(对应#total_count tr)后存在8行不可见内容,现有代码如下:
$('#cercaFoglioCassa').click(function() { $('#foglioCassa').DataTable().destroy(); let dati = {}; dati['min'] = $('#min').val(); dati['max'] = $('#max').val(); if ($('#checkSospeso').is(':checked')) { dati['checkSospeso'] = 'SI'; } else { dati['checkSospeso'] = 'NO'; } dati = JSON.stringify(dati); let now = new Date(); let jsDate = now.getDate() + '-' + (now.getMonth() + 1) + '-' + now.getFullYear(); let dataMin = $('#min').val(); let dataMax = $('#max').val(); // DataTables initialisation var table = $('#foglioCassa').DataTable({ "language": { url: 'https://cdn.datatables.net/plug-ins/1.10.25/i18n/Italian.json' }, "processing": true, "serverSide": true, "order": [], "searching": false, "autoWidth": false, "ajax": { url: "action.php", type: "POST", data: { action: 'getCassa', dati }, }, drawCallback: function(settings) { $('#total_order').html(settings.json.total); $('#total_bonifico').html(settings.json.bonifico); $('#total_contanti').html(settings.json.contanti); $('#total_bancomat').html(settings.json.bancomat); $('#total_cCredito').html(settings.json.cCredito); $('#total_finanziaria').html(settings.json.finanziaria); $('#total_assegno').html(settings.json.assegno); $('#total_rid').html(settings.json.rid); }, "columnDefs": [{ "targets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], "orderable": false, }, { width: '10%', targets: 1 } ], "dom": 'lBfrtip', "buttons": [{ extend: 'collection', text: 'Esporta', buttons: [{ extend: 'copy', footer: true }, { extend: 'excelHtml5', footer: true, customize: (xlsx, config, dataTable) => { let sheet = xlsx.xl.worksheets['sheet1.xml']; let footerIndex = $('sheetData row', sheet).length; let $footerRows = $('tr', dataTable.footer()); // If there are more than one footer rows if ($footerRows.length > 1) { // First header row is already present, so we start from the second row (i = 1) for (let i = 0; i < $footerRows.length; i++) { // Get the current footer row let $footerRow = $footerRows[i]; // Get footer row columns let $footerRowCols = $('th', $footerRow); // Increment the last row index footerIndex++; // Create the new header row XML using footerIndex and append it at sheetData $('sheetData', sheet).append(` <row r="${footerIndex}"> ${$footerRowCols.map((index, el) => ` <c t="inlineStr" r="${String.fromCharCode(65 + index)}${footerIndex}" s="2"> <is> <t xml:space="preserve">${$(el).text()}</t> </is> </c> `).get().join('')} </row> `); } } } }, { extend: 'csv', footer: true }, { extend: 'pdfHtml5', orientation: 'landscape', footer: true, pageSize: 'A4', filename: 'fogliocassa' + jsDate, exportOptions: { columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }, customize: function(doc) { //Remove the title created by dataTables doc.content.splice(0, 1); //Create a date string that we use in the footer. Format is dd-mm-yyyy var now = new Date(); //var jsDate = now.getDate()+'-'+(now.getMonth()+1)+'-'+now.getFullYear(); // Logo converted to base64 // var logo = getBase64FromImageUrl('https://datatables.net/media/images/logo.png'); // The above call should work, but not when called from codepen.io // So we use a online converter and paste the string in. // Done on http://codebeautify.org/image-to-base64-converter // It's a LONG string scroll down to see the rest of the code !!! var logo = ''; // Set page margins [left,top,right,bottom] or [horizontal,vertical] // or one number for equal spread doc.pageMargins = [100, 80, 100, 30]; // Set the font size fot the entire document doc.defaultStyle.fontSize = 11; // Set the fontsize for the table header doc.styles.tableHeader.fontSize = 7; // Create a header object with 2 columns if (dataMin == dataMax) { doc['header'] = (function() { return { columns: [{ image: logo, width: 64, }, { alignment: 'right', fontSize: 14, text: 'Foglio cassa del ' + dataMin } ], margin: 20 } }); } else { doc['header'] = (function() { return { columns: [{ image: logo, width: 64, }, { alignment: 'right', fontSize: 14, text: 'Foglio cassa dal ' + dataMin + ' al ' + dataMax } ], margin: 20 } }); } // Create a footer object with 2 columns doc['footer'] = (function(page, pages) { return { columns: [{ alignment: 'left', text: ['Creato il: ', { text: jsDate.toString() }] }, { alignment: 'right', text: ['Pag. ', { text: page.toString() }, ' di ', { text: pages.toString() }] } ], margin: 20 } }); // Change dataTable layout (Table styling) var objLayout = {}; objLayout['hLineWidth'] = function(i) { return .5; }; objLayout['vLineWidth'] = function(i) { return .5; }; objLayout['hLineColor'] = function(i) { return '#aaa'; }; objLayout['vLineColor'] = function(i) { return '#aaa'; }; objLayout['paddingLeft'] = function(i) { return 4; }; objLayout['paddingRight'] = function(i) { return 4; }; doc.content[0].layout = objLayout; } } ] }] }); $('#risultatoFiltro').css('display', 'block'); // Mostro tabella //Carico incassi divisi per tipo di pagamento // $('#bonifico').html('Bonifico: €' + forziere['bonifico']); // $('#contanti').html('Contanti: €' + forziere['contanti']); // // $('#sommaIncassi').css('display','block'); });
内容的提问来源于stack exchange,提问作者DevP7
相关产品推荐
相关产品推荐

