Добавить пользовательский заголовок таблицы, используя перед каждой таблицей при экспорте нескольких таблиц в один файл PDF с помощью PDFMake

Я хочу добавить пользовательский атрибут данных (имя листа данных - в моем случае) в качестве заголовка перед каждой таблицей при экспорте в PDF с помощью PDFMake. Я написал код, который создает PDF-файл для нескольких таблиц на одном листе PDF, но я хочу добавить заголовки перед каждой таблицей. Кроме того, после каждого стола нет пробелов. Так что тоже хочу добавить.

Вот как выглядят мои 3 таблицы в PDF:

Прикрепление моего кода:

$(document).ready( function() {
    var tables  = document.querySelectorAll('.data-table');
    var tableArr = [];
    var tableContent = [];

    tables.forEach((element, index) => {
      $(element).DataTable();
      tableArr.push(element.dataset.sheetname);
    });

    $('#ExportPdf').click(function(){
      var config = {
        className:"buttons-pdf buttons-html5",
        customize:null,
        download:"download",
        exportOptions:{
          format: {
            header: function (data, column, node){
              if (node.dataset.exportname != null){
                return node.dataset.exportname;
              }
              return data;
            },
            body: function (data, row, column, node) {
              if (node.dataset.exportname != null){
                return node.dataset.exportname;
              }
              return data;
            }
          }
        },
        extension:".pdf",
        filename:"*",
        header:true,
        namespace:".dt-button-2",
        orientation:"portrait",
        pageSize:"A4",
        title:"*"
      };

      var tablesConverted = {};

      tables.forEach((element, index) => {
        var dataTable = $(element).DataTable();
        var data = dataTable.buttons.exportData( config.exportOptions );
        var info = dataTable.buttons.exportInfo( config );
        var rows = [];
        
        if (config.header) {
          rows.push($.map(data.header, function (d) {
            return {
              text: typeof d === 'string' ? d : d+'',
              style: 'tableHeader'
            };
          }));
        }

        for (var i=0, ien=data.body.length ; i<ien ; i++ ) {
          rows.push($.map(data.body[i], function ( d ) {
            return {
              text: typeof d === 'string' ? d : d+'',
              style: i % 2 ? 'tableBodyEven' : 'tableBodyOdd'
            };
          }));
        }
        
        tableContent.push({
          table: {
            headerRows: 1,
            body: rows,
          },
          layout: "lightHorizontalLines",
        });
      });

      var doc = {
        pageSize: config.pageSize,
        pageOrientation: config.orientation,
        content: tableContent,
        styles: {
          tableHeader: {
            bold: true,
            fontSize: 11,
            color: 'white',
            fillColor: '#2d4154',
            alignment: 'left',

          },
          tableBodyEven: {},
          tableBodyOdd: {
            fillColor: '#f3f3f3'
          },
          tableFooter: {
            bold: true,
            fontSize: 11,
            color: 'white',
            fillColor: '#2d4154'
          },
          title: {
            alignment: 'center',
            fontSize: 15
          },
          message: {}
        },
        defaultStyle: {
          fontSize: 10
        }
      };

      if ( config.customize ) {
        config.customize( doc, config );
      }
      pdfMake.createPdf(doc).download('optionalName.pdf');
    });
  });
<style>
  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }

  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }

  tr:nth-child(even) {
    background-color: #dddddd;
  }
</style>
<!-- jQuery -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<!-- Body -->
<button id = "ExportPdf" type = "button">Export All</button>
<table class = "data-table" data-sheetname = "Table 1" id = "table-1">
  <thead>
    <tr>
      <th data-exportname = "Company">Company1</th>
      <th data-exportname = "Contact">Contact1</th>
      <th data-exportname = "Country">Country1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-exportname = "Alfreds Futterkiste">Alfreds Futterkiste</td>
      <td data-exportname = "Maria Anders">Maria Anders</td>
      <td data-exportname = "Germany">Germany</td>
    </tr>
    <tr>
      <td data-exportname = "Centro comercial Moctezuma">Centro comercial Moctezuma</td>
      <td data-exportname = "Francisco Chang">Francisco Chang</td>
      <td data-exportname = "Mexico">Mexico</td>
    </tr>
    <tr>
      <td data-exportname = "Ernst Handel">Ernst Handel</td>
      <td data-exportname = "Roland Mendel">Roland Mendel</td>
      <td data-exportname = "Austria">Austria</td>
    </tr>
  </tbody>
</table>
<br>
<table class = "data-table" data-sheetname = "Table 2">
  <thead>
    <tr>
      <th data-exportname = "Company">Company</th>
      <th data-exportname = "Contact">Contact</th>
      <th data-exportname = "Country">Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-exportname = "Alfreds Futterkiste">Alfreds Futterkiste</td>
      <td data-exportname = "Maria Anders">Maria Anders</td>
      <td data-exportname = "Germany">Germany</td>
    </tr>
  </tbody>
</table>
<br>
<table class = "data-table" data-sheetname = "Table 3">
  <thead>
    <tr>
      <th data-exportname = "Company">Company</th>
      <th data-exportname = "Contact">Contact</th>
      <th data-exportname = "Country">Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-exportname = "Centro comercial Moctezuma">Centro comercial Moctezuma</td>
      <td data-exportname = "Francisco Chang">Francisco Chang</td>
      <td data-exportname = "Mexico">Mexico</td>
    </tr>
    <tr>
      <td data-exportname = "Ernst Handel">Ernst Handel</td>
      <td data-exportname = "Roland Mendel">Roland Mendel</td>
      <td data-exportname = "Austria">Austria</td>
    </tr>
  </tbody>
</table>

@andrewJames Да, ты прав. это тот же вопрос, который я задавал ранее. Я удаляю свой предыдущий вопрос, так как он не был хорошо объяснен мной.

Anubhav kalra 02.04.2023 16:55
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
72
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, что ваш код нуждается только в двух небольших изменениях:

Расстояние:

Вы можете добавить интервал между таблицами, используя поля. Например:

tableContent.push({
  table: {
    headerRows: 1,
    body: rows
  },
  margin: [ 0, 2, 0, 20 ], // left, top, right, bottom
  layout: "lightHorizontalLines",
});

Заголовки:

Вы можете добавить заголовки таблицы, поместив их в свой массив tableContent перед отправкой данных основной таблицы:

// my new code:
tableContent.push(
  { 
    text: tableArr[index]
  }
);

// your existing code:
tableContent.push({ 
  table: {
    headerRows: 1,
    body: rows
  },
  // etc...

(У вас уже есть заголовки в вашем массиве tableArr, поэтому я использовал их.)


Конечный результат:

Конечно, вы можете добавить больше стилей к заголовкам и отрегулировать поля по своему усмотрению.


Я уверен, что есть несколько разных способов решить эту проблему. Но я думаю, что это один из самых простых подходов.

Большое спасибо, ваш ответ дает именно то, что я хочу.

Anubhav kalra 03.04.2023 12:27

Другие вопросы по теме