使用 jQuery tableHTMLExport 插件将多个 html 表格导出为 PDF

Question

我的页面中有多个表格，我想将它们导出到一个 pdf 文件中。

我已经尝试过这个 jQuery tableHTMLExport 插件https://www.jqueryscript.net/table/export-table-json-csv-txt-pdf.html。我已对其进行了修改，但效果不佳。它打印除每个表的标题之外的所有表数据。

html文件

         <div id='print'>

               <table>
         <thead>
             <tr>
                <th>Career History</th>
                <th></th>
                <th></th>
                <th></th>
             </tr>
         </thead>
         <tbody>
            <tr>          
              <td>  <p> Job Title</p></td>
              <td>  <p> Company Name</p></td>
              <td>  <p> Start Date</p></td>
              <td>  <p> End Date</p></td>
            </tr>
            <?php foreach ($history as $h) { ?>

            <tr>
              <td> 
                 <?php echo $h ['job_title']; ?>
              </td>
              <td>
                 <?php echo $h ['comapny_name']; ?>
              </td>
               <td> 
               <?php echo $h ['start_day']; ?>
               </td>
               <td>
                <?php echo $h['end_day']; ?>
               </td>
           </tr>

           <?php } ?>
       </tbody>
   </table>
   <table class="table" id="3">
        <thead>
            <tr>
              <th>Documents</th>
              <th></th>
              <th></th>
              <th></th>                 
            </tr>
        </thead>
         <tbody>
            <tr>
             <td>one</td>
             <td>two</td>
             <td>three</td>
             <td>four</td>
            </tr>
         </tbody>
   </table>
           </div>
 <input type='button' value='export pdf' id='save'/>

   <script>
        $("#save").click(function () {
            $("#print").tableHTMLExport({
                  type: 'pdf', 
                  filename: 'test.pdf' });
                      });

在 tableHTMLExport.js 文件中我添加了嵌套循环

   function toJson(el) {
            var i, j;
            var jsonHeaderArray = [];

            for (i = 0; i < 4; i++) {
                $(el).find('thead').find('tr').not(options.ignoreRows).each(function () {
                    var tdData = "";
                    var jsonArrayTd = [];

                    $(this).find('th').not(options.ignoreColumns).each(function (index, data) {
                        if ($(this).css('display') !== 'none') {
                            jsonArrayTd.push(parseString($(this)));
                        }
                    });
                    jsonHeaderArray.push(jsonArrayTd);

                });

                for (j = 0; j < 4; j++) {
                    var jsonArray = [];
                    $(el).find('tbody').find('tr').not(options.ignoreRows).each(function () {
                        var tdData = "";
                        var jsonArrayTd = [];

                        $(this).find('td').not(options.ignoreColumns).each(function (index, data) {
                            if ($(this).css('display') !== 'none') {
                                jsonArrayTd.push(parseString($(this)));
                            }
                        });
                        jsonArray.push(jsonArrayTd);
                    });
                }

                return {header: jsonHeaderArray[i], data: jsonArray};
            }

        }

Answer 1

我已使用可用的 javaScript 导出多个表并根据需要进行编辑，您可以将此方法附加到输入按钮

 function generate() {

            var doc = new jsPDF('p', 'pt');
            var res1,res0;

            var title = document.getElementById('title').value;
            // first table 
            res0 = doc.autoTableHtmlToJson(document.getElementById('0'));
            //get the columns & rows for first table 
            doc.autoTable(res0.columns, res0.data, {margin: {top: 80}});
            // second table
            res1 = doc.autoTableHtmlToJson(document.getElementById('1'));
            // header for pdf file
            var header = function (data) {
                doc.setFontSize(18);
                doc.setTextColor(40);
                doc.setFontStyle('normal');
                doc.text(title + " Profile", data.settings.margin.left, 50);
            };
              // setting up new option for the second table 
              var options = {
                 beforePageContent: header,
                 margin: {
                  top: 80
                },
                startY: doc.autoTableEndPosY() + 20
            };

            // add columns & rows for the second table
            doc.autoTable(res1.columns, res1.data, options);

            // save pdf file with the following name 

            doc.save("table.pdf");
        } 

如果您有其他解决方案，请分享。