Datatable не экспортирует вторую строку в нижний колонтитул - PullRequest
Новая
       3

Datatable не экспортирует вторую строку в нижний колонтитул

3 голосов
/ 04 марта 2020

У меня есть проблема с данными, из-за которой я не могу экспортировать второй ряд нижнего колонтитула в Excel. ниже фрагмент. когда я экспортирую нижний колонтитул 1 есть в листе, но нижний колонтитул 2 нет. 

$(document).ready( function () {
    $('#table').DataTable({
        dom: 'Bfrtip',
        buttons: [
            { extend: 'excelHtml5', footer: true },
        ]
        
    });
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="table">
    <thead>
        <tr>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>body</td>
            <td>body</td>
            <td>body</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Footer 1</th>
            <th>Footer 1</th>
            <th>Footer 1</th>
        </tr>
        <tr>
            <th>Footer 2</th>
            <th>Footer 2</th>
            <th>Footer 2</th>
        </tr>
    </tfoot>
</table>

1 Ответ

2 голосов
/ 08 марта 2020

К сожалению DataTables не поддерживает многострочный нижний колонтитул таблицы, но есть функция настройки, которая позволяет настроить файл XLSX:

customize

Поскольку: 1.2.0

Этот метод можно использовать для изменения файла XLSX, созданного кнопками. Первый передаваемый параметр - это объект, который содержит файлы XML, а структура объекта соответствует путям файловой системы для этих файлов в файле XLSX. Настройка файла XLSX представляет собой сложную топи c - подробные сведения см. В разделе Настройка в документации excelHtml5 button.

По состоянию на кнопки 1.5.2 этой функции передаются три параметра:

  1. Объект, содержащий файлы XML в структуре файла ZIP, используемой в Excel
  2. Объект конфигурации кнопки
  3. Экземпляр API DataTables для таблицы, к которой принадлежит кнопка.

Мы можем использовать обратный вызов customize и объединить его с чтением нижнего колонтитула таблицы и добавлением дополнительных строк нижнего колонтитула в XML XLS с использованием jQuery: 

$(document).ready( function () {
  $('#table').DataTable({
    dom: 'Bfrtip',
    buttons: [
      {
        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 = 1; 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>
              `);
            }
          }
        }
      }
    ]
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
 <table id="table">
    <thead>
        <tr>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>body</td>
            <td>body</td>
            <td>body</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Footer 1</th>
            <th>Footer 1</th>
            <th>Footer 1</th>
        </tr>
        <tr>
            <th>Footer 2</th>
            <th>Footer 2</th>
            <th>Footer 2</th>
        </tr>
        <tr>
            <th>Footer 3</th>
            <th>Footer 3</th>
            <th>Footer 3</th>
        </tr>
    </tfoot>
</table>
...