我可以使用 pdfmake 将两个数据表导出到一个 pdf 中吗答案

【问题标题】：Can I export two dataTables into a single pdf with pdfmake我可以使用 pdfmake 将两个数据表导出到一个 pdf 中吗
【发布时间】：2022-09-28 00:28:54
【问题描述】：

HTML我想使用单个导出按钮将以下两个数据表导出到单个 pdf 中。两个数据表都有不同的列，因此无法合并。

<div class=\"container\" id=\"exTable\">        
      <div class=\" mt-3\">
        <h2>Basic Table Example1</h2>
        <table class=\"table\" id=\"example1\" style=\"width:100%\">
            <thead class=\"table-dark\">
              <tr>
                <th>User Priority</th>
                <th>Average MTTR(Hrs)</th>
                <th>Total Number Of Tickets</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1-Critical</td>
                <td>164.12</td>
                <td>182</td>
              </tr>
              <tr>
                <td>2-High</td>
                <td>190.23</td>
                <td>498</td>
              </tr>
              <tr>
                <td>3-Moderate</td>
                <td>908.93</td>
                <td>1511</td>
              </tr>
              <tr>
                  <td>4-Low</td>
                  <td>211.43</td>
                  <td>1817</td>
                </tr>
            </tbody>
          </table>
      </div>
      <div class=\"table-responsive mt-3\">
        <h2>Basic Table Example2</h2>
        <table class=\"table display nowrap\" id=\"example2\">
          <thead class=\"table-dark\">
            <tr>
                <th>Tower</th>
                <th>CC</th>
                <th>Cluster</th>
                <th>Assignment Group</th>
                <th>Ticket Priority</th>
                <th>Average MTTR(Hrs)</th>
                <th>Total Number Of Tickets</th>
                <th>Incidents resolved Using KO\'s</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>MANUFACTURING</td>
              <td>RICHMOND GROUPS</td>
              <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
              <td>SN PM USA Workbrain WFM and ETM</td>
              <td>1 - Critical</td>
              <td>4.89</td>
              <td>5</td>
              <td>0</td>
            </tr>
            <tr>
                <td>MANUFACTURING</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
            </tr>
            <tr>
                <td>MANUFACTURING</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
            </tr>
            <tr>
              <td>MANUFACTURING</td>
              <td>RICHMOND GROUPS</td>
              <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
              <td>SN PM USA Workbrain WFM and ETM</td>
              <td>1 - Critical</td>
              <td>4.89</td>
              <td>5</td>
              <td>0</td>
            </tr>
            <tr>
                <td>MANUFACTURING</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
          </tbody>
        </table>
      </div>    
</div>

CSS

 table{
    table-layout:fixed;
    }
    td,th{
    font-size:10px;overflow:hidden;
    }

Javascript我想在这个 dataTable jQuery 函数中进行更改，如果我单击单个按钮，两个 dataTables 数据都应该导出到同一个 pdf 文件中。

$(document).ready(function () {
    $(\'#example1\').DataTable({
        dom: \'Bfrtip\',
        buttons: [
            \'pdfHtml5\'
        ]   
    });
    });
    $(document).ready(function () {
    $(\'#example2\').DataTable({
        scrollX: true,
        pageLength : 5,
        lengthMenu: [[5, 10, 20, -1], [5, 10, 20, \'Todos\']],
        dom: \'Bfrtip\',
        buttons: [
            \'pdfHtml5\'
        ]            
    });
    });

你研究过这个吗？如果有，你发现了什么？你能取得任何进展吗？
示例：Merging multiple pdf Using pdfMake.js in Angular。还有更多示例in these search results。
您可以使用customize: function ( pdf ) { ... } 访问每个表的 PDF 的 PDFMake 对象。因此，您拥有合并所需的所有原材料。
嗨@andrewJames，是的，我已经对此进行了研究，并且由于没有以这种方式生成pdf的内置方法，因此我必须使用custom：function（pdf）{}。但是，我无法从第二个数据表中获取表数据以与第一个数据表合并。那是我需要帮助的地方。

标签： javascript html datatable

【解决方案1】：

这是一种创建一个 PDF 的方法，该 PDF 包含来自网页中两个 DataTables 的数据：

第一个数据表创建时没有按钮：

$('#example1').DataTable();

第二个表使用 customize: function ( doc ) { ... } syntax - 与我在 cmets 中链接的相同。

在该函数中，我们访问第一个表的数据：

var table1 = $('#example1').DataTable();

我们为headings 行和data 行构建数组。这为我们提供了那个较小表的原始数据。
我们将这些原始数据转换为构建 PDF 表所需的格式，并将其存储在 tbl1_rows 数组中：

var tbl1_rows = []; // the data from the first table

最后，我们从主表中克隆 PDF 表数据，然后将其数据替换为我们的 tbl1_rows 数据 - 然后我们将这个新的表对象插入到 PDF 中：

var clone = structuredClone(doc.content[1]);
clone.table.body = tbl1_rows;
doc.content.splice(1, 0, clone);

最终结果：

因此，基本上，该方法是为主表创建一个 PDF - 并为该附加表拼接额外数据，您也希望在同一个 PDF 中显示这些数据。

以下是完整代码供参考：

$(document).ready(function() {

  $('#example1').DataTable();

  $('#example2').DataTable({
    dom: 'Brftip',
    buttons: [
      {
        text: 'PDF Export',
        extend: 'pdfHtml5',
        customize: function ( doc ) {
          var table1 = $('#example1').DataTable();
          var headings = table1.columns().header().to$().map(function(i,e) { return e.innerHTML;}).get();;
          var data = table1.rows().data();       

          var tbl1_rows = []; // the data from the first table

          // PDF header row for the first table:
          tbl1_rows.push( $.map( headings, function ( d ) {
            return {
              text: typeof d === 'string' ? d : d+'',
              style: 'tableHeader'
            };
          } ) );

          // PDF body rows for the first table:
          for ( var i = 0, ien = data.length ; i < ien ; i++ ) {
            tbl1_rows.push( $.map( data[i], function ( d ) {
              if ( d === null || d === undefined ) {
                d = '';
              }
              return {
                text: typeof d === 'string' ? d : d+'',
                style: i % 2 ? 'tableBodyEven' : 'tableBodyOdd'
              };
            } ) );
          }

          // create a clone of the main PDF table (where 
          // content[0] is the PDF's main heading, and content[1]
          // is the main table:
          var clone = structuredClone(doc.content[1]);
          //replace the main table data with the tbl1_rows data:
          clone.table.body = tbl1_rows;
          // insert that cloned table into the main PDF doc, between
          // the PDF title and the main table:
          doc.content.splice(1, 0, clone);

        }
      }
    ]
  });

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.css"/>
 
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.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/1.12.1/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.js"></script>

  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

<div class="container" id="exTable">        
      <div class=" mt-3">
        <h2>Basic Table Example1</h2>

        <table class="table" id="example1" style="width:100%">
            <thead class="table-dark">
              <tr>
                <th>User Priority</th>
                <th>Average MTTR(Hrs)</th>
                <th>Total Number Of Tickets</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1-Critical</td>
                <td>164.12</td>
                <td>182</td>
              </tr>
              <tr>
                <td>2-High</td>
                <td>190.23</td>
                <td>498</td>
              </tr>
              <tr>
                <td>3-Moderate</td>
                <td>908.93</td>
                <td>1511</td>
              </tr>
              <tr>
                  <td>4-Low</td>
                  <td>211.43</td>
                  <td>1817</td>
                </tr>
            </tbody>
          </table>
      </div>
      <div class="table-responsive mt-3">
        <h2>Basic Table Example2</h2>
        <table class="table display nowrap" id="example2">
          <thead class="table-dark">
            <tr>
                <th>Tower</th>
                <th>CC</th>
                <th>Cluster</th>
                <th>Assignment Group</th>
                <th>Ticket Priority</th>
                <th>Average MTTR(Hrs)</th>
                <th>Total Number Of Tickets</th>
                <th>Incidents resolved Using KO's</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>MANUFACTURING 01</td>
              <td>RICHMOND GROUPS</td>
              <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
              <td>SN PM USA Workbrain WFM and ETM</td>
              <td>1 - Critical</td>
              <td>4.89</td>
              <td>5</td>
              <td>0</td>
            </tr>
            <tr>
                <td>MANUFACTURING 02</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
            </tr>
            <tr>
                <td>MANUFACTURING 03</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
            </tr>
            <tr>
              <td>MANUFACTURING 04</td>
              <td>RICHMOND GROUPS</td>
              <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
              <td>SN PM USA Workbrain WFM and ETM</td>
              <td>1 - Critical</td>
              <td>4.89</td>
              <td>5</td>
              <td>0</td>
            </tr>
            <tr>
                <td>MANUFACTURING 05</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING 06</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING 07</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING 08</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING 09</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING 10</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING 11</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING 12</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING 13</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING 14</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
              <tr>
                <td>MANUFACTURING 15</td>
                <td>RICHMOND GROUPS</td>
                <td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>
                <td>SN PM USA Workbrain WFM and ETM</td>
                <td>1 - Critical</td>
                <td>4.89</td>
                <td>5</td>
                <td>0</td>
              </tr>
          </tbody>
        </table>
      </div>    
</div>

</body>
</html>

【讨论】：