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);

在数据表属性中，为页脚

应用 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以获取代码和演示。

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

1 个答案: