You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.26 06:09:24