Question

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

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

html文件

  this.flashMessage.success({
   title: 'New Friend!',
   message: data.user_created_by.full_name + ' started chatting with you!',
   time: 5000,
   blockClass: 'image-uploaded-flash',
 });

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

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

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

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

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

1 个答案: