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

Question

I have multiple tables in my page and I want to export them into one pdf file.

I have tried this jQuery tableHTMLExport plugin https://www.jqueryscript.net/table/export-table-json-csv-txt-pdf.html . I have modified it but did not work well. It prints all the tables data except the heading for each table.

html file

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

in the tableHTMLExport.js file I have add nested loop

   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

I have used available javaScript for exporting multiple tables and edited as my needs, you can attach this method to an input button

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

if you have other solutions please share it.