Флажки не отображаются с помощью jsPDF - PullRequest
Новая
       8

Флажки не отображаются с помощью jsPDF

0 голосов
/ 27 мая 2020

У меня есть страница, которая автоматически заполняет форму на основе некоторых SQL данных. Форматирование формы отражает форму, которую некоторые пользователи в настоящее время должны заполнять вручную, поэтому это предназначено для обеспечения полного и точного заполнения формы из SQL вместо этого и экономии времени пользователей. Однако в результате форматирование формы должно быть таким же, как сейчас.

Затем у меня есть кнопка, которую пользователь нажимает в нижней части формы, и она использует jsPDF и html2canvas для преобразования 3-страничных div-ов в 3-страничный PDF-файл, который автоматически отправляется на наш сервер s3 для для доступа к ним через страницу с файлами.

Теперь все в основном работает отлично, за исключением того, что на первой странице есть столбец флажков, которые используются для документирования, если что-либо в форме было «изменено». Вы можете увидеть пример здесь. По сути, если ответ на любой из вопросов - «да», он автоматически проверяет поле «да», но также есть функция Javascript, которая записывает таблицу SQL, если они (не) щелкают поле и сохраняют изменение.

Пример формы w Флажок

Мои сценарии для jQuery, jsPDF и html2canvas 

<!-- jsPDF library -->
<script src="/jsPDF/dist/jspdf.debug.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

Вот HTML, где флажок: 

<div class="filerow">
<div class="mcfcolumn"><b>Assignment of Benefits (AOB)</b></div>
<div class="response"><?php echo $aobVal; ?></div>
<div class="changebox"><input type="checkbox" class="checkbox" id="aob" onclick="checkboxClicked('aob')" value="<?php print_r($changeVals['aob']); ?>" <?php if($changeVals['aob'] == 'yes'){ ?> checked <?php } ?> ></div>
</div>

PHP отображает результаты некоторых запросов SQL.

Внизу страницы находится кнопка для функции Javascript, которая создает PDF 

<button class="submitbutton" id="createPdf" onclick="createPdf(<?php echo '\'' . $cid . '\', \'' . $title . '\''; ?>)">Generate PDF</button>

Я использовал код из этого ответа, чтобы создать рекурсивную функцию для jsPDF 

function createPdf(claimid, title) {

    var pdf = new jsPDF('p', 'pt', 'a4');
        var pdfName = 'test.pdf';

        var options = {};

        var $divs = $('.page')                //jQuery object of all the myDivClass divs
        var numRecursionsNeeded = $divs.length -1;     //the number of times we need to call addHtml (once per div)
        var currentRecursion=0;

        //Found a trick for using addHtml more than once per pdf. Call addHtml in the callback function of addHtml recursively.
        function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
            //Once we have done all the divs save the pdf
            if(currentRecursion==totalRecursions){
                // pdf.save(pdfName);

                var pdfFile = btoa(pdf.output()); 
                $.ajax({
                    method: "POST",
                    url: "velocityform_s3save.php",
                    data: {
                        data: pdfFile,
                        claimid: claimid,
                        title: title,
                    },
                }).done(function(data){
                    console.log(data);
                });

            }else{
                currentRecursion++;
                pdf.addPage();
                //$('.page')[currentRecursion] selects one of the divs out of the jquery collection as a html element
                //addHtml requires an html element. Not a string like fromHtml.
                pdf.addHTML($('.page')[currentRecursion], 15, 20, options, function(){
                    console.log(currentRecursion);
                    recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
                });
            }
        }

        pdf.addHTML($('.page')[currentRecursion], 15, 20, options, function(){
            recursiveAddHtmlAndSave(currentRecursion, numRecursionsNeeded);
        });
}

У меня Ajax идет на страницу php, которая сохраняет форму в s3 вместо того, чтобы просто сохранять локально, но это не очень важно, потому что когда я использую

pdf.save(pdfName);

Я получаю локально сохраненный PDF-файл, в котором также не отображаются флажки. Когда PDF-файл отображается, он выглядит следующим образом:

PDF-файл создан

Все остальное делает именно то, что мне нужно, за исключением этой детали. Я использовал jsPDF вместо TCPDF, потому что между CSS, PHP, HTML и Javascript он просто не мог визуализировать удаленно хорошо отформатированный PDF-файл. Пока что jsPDF - единственное, что я обнаружил, что смог отобразить 3 страницы в правильном форматировании. Любая помощь в установке флажков для рендеринга в PDF приветствуется.

Спасибо.

1 Ответ

0 голосов
/ 27 мая 2020

Если у кого-то есть похожая проблема, я обнаружил, что проблема в том, что мне нужно обновить ссылку html2canvas. Я нашел ответ здесь . 

<script src="https://raw.githubusercontent.com/CodeYellowBV/html2canvas/master/build/html2canvas.js"></script>

Сразу решил проблему.

...