Datatable 不允许在导出的 pdf 文件中包含多个页脚行

Question

我正在尝试使用导出选项创建一个支持多个页脚的 Datatable PDF。

但它只允许第一行页脚在导出的 PDF 中

请告诉我是否可以在数据表中创建多个页脚？ 和 如果是，那么如何在java脚本中实现？

我正在分享代码

在 Java Script 中创建数据表并在表中添加 tfoot

'<tfoot id="reportTblFoot' + chartIndex+ '">'+
'</tfoot>'

表格页脚变量

var tfoot='#reportTblFoot'+chartIndex;

数据添加到页脚

var footer1 = $("<tr />");
                footer1.append("<td style='border:none;font-style:italic;line-height:0;font-size:10px'>* Applicable row 1</td>");
                footer1.append("<td style='display:none'/>");
                footer1.append("<td style='display:none'/>");
                $(tfoot).append(footer1);

            var footer2 = $("<tr />");
            footer2.append("<td style='border:none;font-style:italic;line-height:0;font-size:10px'>** Not Applicable row 2</td>");
            footer2.append("<td style='display:none'/>");
            footer2.append("<td style='display:none'/>");
            $(tfoot).append(footer2);

            var footer3 = $("<tr />");
            footer3.append("<td style='border:none;font-style:italic;line-height:0;font-size:10px'>*** Not Applicable row 3</td>");
            footer3.append("<td style='display:none'/>");
            footer3.append("<td style='display:none'/>");
            $(tfoot).append(footer3);

            var percSumNote = $("<tr />");
            percSumNote.append("<td style='border:none;'><font size='1' color='grey'>**** Not Applicable row 4</font></td>");
            percSumNote.append("<td style='display:none'/>");
            percSumNote.append("<td style='display:none'/>");
            $(tfoot).append(percSumNote);

在数据表属性中为 footer

应用 TRUE

buttons: [ {
                                 extend: 'pdf',
                                 filename:fileName,
                                 message:tableSubTitle,
                                 title: tableTitle,
                                 footer:true,
                                 pageSize : "A3",
                                 customize: function (doc) {
                                     doc.defaultStyle.alignment = 'left';
                                     doc.styles.message = {
                                             alignment: 'center'
                                         }
                                     doc.styles.table = {
                                             alignment: 'center',
                                             width: '100%',
                                         }
                                     doc.defaultStyle.fontSize = 16;
                                     doc.styles.tableFooter.fontSize = 8;
                                     doc.pageMargins = [ 130, 20, 130, 20 ];
                                     doc.content.forEach(function(item) {
                                         if (item.table) {
                                            // Set width for 3 columns
                                            item.table.widths = [350, 100, 100,'*'] 
                                         } 
                                      });
                                 } 
                             }]

在下载的 PDF 中只添加第一个页脚

Answer 1

作为@davidkonrad mentioned，作者在this post 中解释说目前不支持。

解决方法是将多个页脚合并为一行，在行之间使用换行符\n，并将 PDF 库配置为不去除换行符。

例如：

var tfoot='#reportTblFoot'+chartIndex;

var footer1 = $("<tr />");
footer1.append(
    "<th>" +
    "<div style='font-style:italic;font-size:10px'>" +
    "* Applicable row 1<br>\n" +
    "** Not Applicable row 2<br>\n" +
    "*** Not Applicable row 3\n" +
    "</div>" +
    "<div>" +
    "<font size='1' color='grey'>**** Not Applicable row 4</font>" +
    "</div>" +
    "</th>"
);

footer1.append("<th style='display:none'/>");
footer1.append("<th style='display:none'/>");

$(tfoot).append(footer1);

您还需要为 PDF 按钮使用以下选项以避免条纹换行符。

buttons: [
   { 
      extend: 'pdfHtml5',
      footer:true,
      exportOptions: {
         stripNewlines: false
      }
      // ... skipped other options ...
   }
],

有关代码和演示，请参阅this example。