复选框不在jsPDF中显示。

Question

我有一个页面，根据一些SQL数据自动填充一个表单。表单的格式反映了目前一些用户需要手动填充的表单，所以这样设计的目的是为了确保表单完全准确地从SQL中填充，而不是，为用户节省一些时间。不过因此，表单的格式必须和目前的格式一模一样。

然后，我在表单底部设置了一个按钮，用户点击后，它会使用jsPDF和html2canvas将3个 "page "divs变成一个3页的PDF文件，并自动发送到我们的s3服务器，让他们通过文件页面访问。

现在一切基本都能完美运行，除了在第一页上有一列复选框，用于记录表单中是否有任何 "更改"。你可以在这里看到一个例子。基本上，如果任何一个问题的答案是 "是"，它就会自动勾选 "是 "的框，但也有一个Javascript函数，如果他们(un)点击了一个框，就会写一个SQL表，并将变化持久化。

带有复选框的表单示例

我的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查询的结果。

在页面底部有一个按钮，用于创建PDF的Javascript函数。

<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的帮助都是感激的。

谢谢。

Answer 1

如果有人有类似的问题，我发现问题是我需要更新我的html2canvas链接。我找到了答案 此处 .

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

立即解决了这个问题。