Datatables - неотображенная строка таблицы с искаженным форматом, ячейка не определена при попытке экспорта в PDF

У меня есть таблица ниже,

<table id="dtBasicExample" class="table table-bordered" style="border : none;">
    <thead class="text-info" style="border : none;">
        <tr>
            <th colspan="16" style="border : none;"></th>
        </tr>
        <tr>
            <th colspan="2" class="text-right" style="border : none;">Date</th>
            <th colspan="14" style="border : none;">: <%=dstart%> - <%=dend%></th>
        </tr>
        <tr>
            <th colspan="2" class="text-right" style="border:none;">Personel</th>
            <th colspan="14" style="border : none;">: <%=pers%></th>
        </tr>
        <tr>
            <th colspan="2" class="text-right" style="border:none;">Grade</th>
            <th colspan="14" style="border : none;">: <%=grade%></th>
        </tr>
        <tr>
            <th colspan="2" class="text-right" style="border:none;">Date Generated</th>
            <th colspan="14" style="border : none;">: <%=nowdate %></th>
        </tr>
        <tr>
            <th colspan="16" style="border-left : none; border-right: none;"/>
        </tr>
        <tr class="text-center">
            <th rowspan="3">Date</th>
            <th colspan="14">Number of Students</th>
            <th rowspan="3">Grand Total</th>
        </tr>
        <tr class="text-center">
            <th colspan="7">Class A</th>
            <th colspan="7">Class B</th>
        </tr>
        <tr class="text-center">
            <th style="width:6.2%;">Eng</th>
            <th style="width:6.2%;">BM</th>
            <th style="width:6.2%;">Man</th>
            <th style="width:6.2%;">SC</th>
            <th style="width:6.2%;">PHY</th>
            <th style="width:6.2%;">CHE</th>
            <th style="width:6.2%;">Sum</th>
            <th style="width:6.2%;">Eng</th>
            <th style="width:6.2%;">BM</th>
            <th style="width:6.2%;">Man</th>
            <th style="width:6.2%;">SC</th>
            <th style="width:6.2%;">PHY</th>
            <th style="width:6.2%;">CHE</th>
            <th style="width:6.2%;">Sum</th>
        </tr>
    </thead>
...

Ниже мой js для экспорта в PDF.

{
    action: function (e, dt, button, config) {
        showNotification('top', 'right', 'PDF exported sucessfully!');
        $.fn.dataTable.ext.buttons.pdfHtml5.action.call(this, e, dt, button, config);
    },
    extend: 'pdf',
    className: 'btn-info btnspaces',
    text: 'Export to PDF',
    filename: 'Students',
    orientation: 'landscape',
    pageSize: 'LEGAL',
    customize: function (pdf) {
        var firstHeaderRow = [];
        var secondHeaderRow = [];
        //11
        $('#dtBasicExample').find("thead>tr:nth-child(7)>th").each(
            function (index, element) {
            var colSpan = element.getAttribute("colspan");
            var rowSpan = element.getAttribute("rowspan");
            firstHeaderRow.push({
                text: element.innerHTML,
                style: "tableHeader",
                colSpan: colSpan,
                rowSpan: rowSpan
            });
            for (var i = 0; i < colSpan - 1; i++) {
                firstHeaderRow.push({});
            }
        });
        //10
        $('#dtBasicExample').find("thead>tr:nth-child(8)>th").each(
            function (index, element) {
            var colSpan = element.getAttribute("colspan");
            var rowSpan = element.getAttribute("rowspan");
            secondHeaderRow.push({
                text: element.innerHTML,
                style: "tableHeader",
                colSpan: colSpan,
                rowSpan: rowSpan
            });
            for (var i = 0; i < colSpan - 1; i++) {
                secondHeaderRow.push({});
            }
        });

        pdf.content[1].table.headerRows = 3;

        var objLayout = {};
        objLayout['hLineWidth'] = function (i) {
            return .5;
        };
        objLayout['vLineWidth'] = function (i) {
            return .5;
        };
        objLayout['hLineColor'] = function (i) {
            return 'black';
        };
        objLayout['vLineColor'] = function (i) {
            return 'black';
        };
        objLayout['paddingTop'] = function (i) {
            return 5;
        };
        objLayout['paddingBottom'] = function (i) {
            return 5;
        };
        objLayout['paddingLeft'] = function (i) {
            return 9;
        };
        objLayout['paddingRight'] = function (i) {
            return 9;
        };
        pdf.content[1].table.body.unshift(secondHeaderRow);
        pdf.content[1].table.body.unshift(firstHeaderRow);
        pdf.content[1].layout = objLayout;
    }

У меня нет проблем с экспортом этого в excel, но когда я пытаюсь экспортировать его в PDF, он выдает ошибку

неперехваченная искаженная строка таблицы, ячейка не определена

Я попытался удалить colspan и вручную добавить <td></td> в таблицы до 16 столбцов, он отлично работает, но дата и общая сумма находятся в последнем столбце, а не охватывают все 3 столбца.


datatables pdfmake
person justarandom    schedule 10.11.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы экспортировать заголовок PDF с colSpan и rowSpan, пустая ячейка должна быть дополнена ячейкой, покрытой диапазоном. Следующий фрагмент кода добавит пустую базу ячеек к colSpan и rowSpan заглавной строки (‹th›).

Из-за загрузки в изолированных фреймах (удалено) кнопка во фрагменте кода будет не работает, вы можете скопировать следующий код в HTML-файл и открыть файл в браузере, чтобы увидеть результат.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/b-print-1.6.2/datatables.min.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/b-print-1.6.2/datatables.min.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
    $('#dataTable').DataTable({
      dom: 'Bfrtip',
      buttons: [{
        extend: 'pdf',
        download: 'download',
        text: 'Export to PDF',
        filename: 'Students',
        orientation: 'landscape',
        pageSize: 'LEGAL',
        customize: function(pdfDocument) {
          let headerRows = [];
          let noOfColumn = 16;
          let rowSpansOfColumns = [];
          for (let i = 0; i < noOfColumn; i++) {
            rowSpansOfColumns.push([]);
          }
          let noOfExtraHeaderRow = 3;
          pdfDocument.content[1].table.headerRows = noOfExtraHeaderRow + 1;
          for (let i = 1; i <= noOfExtraHeaderRow; i++) {
            let headerRow = [];
            let colIdx = 0;
            while (colIdx < rowSpansOfColumns.length && rowSpansOfColumns[colIdx].includes(i)) {
              headerRow.push({});
              colIdx++
            }

            $('#dataTable').find("thead>tr:nth-child(" + i + ")>th").each(
              function(index, element) {
                let colSpan = parseInt(element.getAttribute("colSpan"));
                let rowSpan = parseInt(element.getAttribute("rowSpan"));
                if (rowSpan > 1) {
                  for (let col = colIdx; col < colIdx + colSpan; col++) {
                    for (let row = i + 1; row < i + rowSpan; row++) {
                      rowSpansOfColumns[col].push(row);
                    }
                  }
                }
                headerRow.push({
                  text: element.innerHTML,
                  style: "tableHeader",
                  colSpan: colSpan,
                  rowSpan: rowSpan
                });
                colIdx++
                for (let j = 0; j < colSpan - 1; j++) {
                  headerRow.push({});
                  colIdx++
                }
                while (colIdx < rowSpansOfColumns.length && rowSpansOfColumns[colIdx].includes(i)) {
                  headerRow.push({});
                  colIdx++
                }
              });

            headerRows.push(headerRow);
          }
          for (let i = 0; i < headerRows.length; i++) {
            pdfDocument.content[1].table.body.unshift(headerRows[headerRows.length - 1 - i]);
          }
        }

      }]
    });
  });
</script>

<table id="dataTable" cellspacing="0" width="auto">
  <thead>
    <tr>
      <th colspan="16" style="border-left : none; border-right: none;"></th>
    </tr>
    <tr class="text-center">
      <th rowspan="3">Date</th>
      <th colspan="14">Number of Students</th>
      <th rowspan="3">Grand Total</th>
    </tr>
    <tr class="text-center">
      <th colspan="7">Class A</th>
      <th colspan="7">Class B</th>
    </tr>

    <tr class="text-center">
      <th style="width:6.2%;">Eng</th>
      <th style="width:6.2%;">BM</th>
      <th style="width:6.2%;">Man</th>
      <th style="width:6.2%;">SC</th>
      <th style="width:6.2%;">PHY</th>
      <th style="width:6.2%;">CHE</th>
      <th style="width:6.2%;">Sum</th>
      <th style="width:6.2%;">Eng</th>
      <th style="width:6.2%;">BM</th>
      <th style="width:6.2%;">Man</th>
      <th style="width:6.2%;">SC</th>
      <th style="width:6.2%;">PHY</th>
      <th style="width:6.2%;">CHE</th>
      <th style="width:6.2%;">Sum</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>2020/10/11</td>
      <td>50</td>
      <td>60</td>
      <td>70</td>
      <td>80</td>
      <td>90</td>
      <td>85</td>
      <td>25</td>
      <td>50</td>
      <td>60</td>
      <td>70</td>
      <td>80</td>
      <td>90</td>
      <td>85</td>
      <td>25</td>
      <td>100</td>
    </tr>
    <tr>
      <td>2020/11/11</td>
      <td>53</td>
      <td>63</td>
      <td>73</td>
      <td>83</td>
      <td>93</td>
      <td>83</td>
      <td>23</td>
      <td>53</td>
      <td>63</td>
      <td>73</td>
      <td>83</td>
      <td>93</td>
      <td>83</td>
      <td>26</td>
      <td>100</td>
    </tr>
  </tbody>
</table>

Изображение экспортированного отчета

pdf_withRowSpanHeader

Ссылки:
документация по pdfmake
площадка pdfmake

person samabcde    schedule 10.11.2020
comment
как мне сделать код для выбора определенного заголовка для экспорта? Скажем, я хочу выбрать 7-й тр thead>tr:nth-child(7)>th, как мне это сделать? - person justarandom; 12.11.2020
comment
Вы должны указать, что вы на самом деле хотите, когда публикуете свой вопрос. Я не могу помочь без каких-либо подробностей, и я думаю, что то, что вы хотите сейчас, сильно отличается от вашего вопроса о происхождении. - person samabcde; 12.11.2020