使用PDFMake导出多个动态DataTables到单个PDF的问题

问题根源 #

1. 对象键冲突导致数据丢失：原代码用DOM元素作为tablesConverted的键，DOM元素转为字符串后均为[object HTMLTableElement]，每次循环会覆盖之前的表格数据，最终仅保留最后一个表格。
2. 静态内容配置无法适配动态表格：手动指定doc.content中的表格条目，无法处理数量不确定的动态生成表格。

修正后的完整代码 #

JavaScript

$(document).ready(function() {
    var tables = document.querySelectorAll('.data-table');
    tables.forEach((element) => {
      $(element).DataTable();
    });

    $('#ExportPdf').click(function(){
      var config = {
        className:"buttons-pdf buttons-html5",
        customize:null,
        download:"download",
        exportOptions:{},
        extension:".pdf",
        filename:"*",
        header:true,
        namespace:".dt-button-2",
        orientation:"portrait",
        pageSize:"A4",
        title:"*"
      };

      var pdfTables = [];

      tables.forEach((element) => {
        var dataTable = $(element).DataTable();
        var data = dataTable.buttons.exportData(config.exportOptions);
        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'
            };
          }));
        }
        
        pdfTables.push({
          title: element.dataset.sheetname,
          body: rows,
          headerRows: 1
        });
      });
      
      // 动态生成PDF内容，支持任意数量表格
      var docContent = [];
      pdfTables.forEach((table, idx) => {
        // 添加表格标题（可根据需求移除）
        if (table.title) {
          docContent.push({
            text: table.title,
            style: 'title',
            margin: [0, idx === 0 ? 0 : 20, 0, 10] // 第一个表格无需上边距
          });
        }
        // 添加表格组件
        docContent.push({
          table: {
            headerRows: table.headerRows,
            body: table.body
          },
          layout: 'noBorders'
        });
      });

      var doc = {
        pageSize: config.pageSize,
        pageOrientation: config.orientation,
        content: docContent,
        styles: {
          tableHeader: {
            bold: true,
            fontSize: 11,
            color: 'white',
            fillColor: '#2d4154',
            alignment: 'center'
          },
          tableBodyEven: {},
          tableBodyOdd: {
            fillColor: '#f3f3f3'
          },
          tableFooter: {
            bold: true,
            fontSize: 11,
            color: 'white',
            fillColor: '#2d4154'
          },
          title: {
            alignment: 'center',
            fontSize: 15,
            bold: true
          },
          message: {}
        },
        defaultStyle: {
          fontSize: 10
        }
      }; 
      pdfMake.createPdf(doc).download('所有表格导出.pdf');
    });
  });

CSS

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

HTML

<button id="ExportPdf" type="button">导出所有表格</button>
<table class="data-table" data-sheetname="表格1" id="table-1">
  <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>
    <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="表格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="表格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>

关键改进点 #

• 使用数组存储表格数据：替换原对象存储方式，避免键冲突，确保所有表格数据都被保留。
• 动态生成PDF内容：遍历表格数组自动生成每个表格的标题和组件，支持任意数量的动态表格。
• 优化标题样式：为每个表格添加居中加粗的标题，并设置合理间距提升可读性。

内容的提问来源于stack exchange，提问作者Anubhav kalra