HTML таблица в jsPDF - не добавлять страницу, если страница должна быть 2 страницы - PullRequest
0 голосов
/ 07 января 2020

У меня есть таблица, в которой размещаются задачи или действия сотрудников, но здесь, в таблице, у меня есть 4 группы и 20 действий на группы.

Мне удалось сохранить и загрузить таблицу в файл PSD. но проблема в том, что страницы в PDF не в порядке, страницы не расширяются и не добавляются страницы, даже таблица должна быть 2 страницы.

Вот пример ошибки pdf enter image description here

, который я использовал для l oop для временных данных в каждой группе и операциях или задачах.

Я хочу добавить страницу, если таблица расширяется. Пожалуйста, помогите мне выйти из этой проблемы.

Вот мой код:

         <section class="statistic statistic2" style="background-color: white;">
            <div class="container-fluid">
                <div align="right">
                    <button class="btn btn-info btn-sm">Add Activity</button>
                    <button class="btn btn-info btn-sm">Add Group</button>
                    <button class="btn btn-info btn-sm">Report</button>
                    <button class="btn btn-info btn-sm">Print</button>
                    <button class="btn btn-info btn-sm" id="saveBTN">Save</button>
                </div><br />
                <div class="boards" id="boards" style="margin: 0 !important; padding: 0 !important;">
                    <?php for ($boards=1000; $boards < 1004; $boards++) { ?>

                        <table class="table table-borderless table-earning" id="albums">
                            <thead>
                                <tr class="text-center">
                                    <th class="row-text text-left" width="70%">eLearning Task Example</th>
                                    <th width="7.5%">Status</th>
                                    <th width="10%">Due Date</th>
                                    <th width="7.5%">Priority</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php for ($i=0; $i < 20; $i++) { ?>
                                <tr>
                                    <td class="row-text row-name">
                                        <span>Activity <small>(<?php echo $i; ?>)</small> 
                                            <span class="pencil-edit"><i class="fas fa-pencil-alt"></i></span>
                                            <span class="trash-delete"><i class="fas fa-pencil-alt"></i></span>
                                        </span>
                                    </td>
                                    <td class="text-center row-text row-status">
                                        <span class="status-td" style="position: relative; width: 100%;">
                                            Working on it
                                        </span>
                                    </td>
                                    <td class="text-center row-text">
                                        <span class="date-icon check"><i class="fas fa-check-circle"></i></span>
                                        <input type="text" class="text-center datepicker" value="<?php echo date("M d, Y"); ?>" id="<?php echo $boards."_".$i ?>">
                                    </td>
                                    <td class="text-center row-text row-status" style="background-color: #a25ddc;">High</td>
                                </tr>
                                <?php } ?>
                            </tbody>
                        </table>

                    <?php } ?>
                </div>
            </div>
        </section>

Javascript Код:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
<script>
$(document).ready(function() {


    $('#saveBTN').click(function() {

      var options = options || {};
      options.callback = options.callback || function () {};
      options.html2canvas = options.html2canvas || {};
      options.html2canvas.canvas = options.html2canvas.canvas || 
      this.canvas;
      options.jsPDF = options.jsPDF || this;

      var pdf = new jsPDF('a4');
      pdf.addHTML($("#boards"), options, function() {

        pdf.save('SampleReport.pdf');
        pdf.addPage();
      });

    });
});
</script>
...