Question

我用Acrobat打开了一份打印的表格，并使所有元素都可以在线备案。然后我将整个文档转换为HTML并在我的网站上实现，效果很好。您可以编辑和填充所有字段，并使用CSS保留打印表单中的原始样式。现在应该可以将填好的表格保存到pdf并下载，但我很难找到一种方法来做到这一点。

我尝试使用下面的代码（html2canvas）。我用Form =＆＃34; print-wrap page1＆＃34;包装了Form的4页。等等。当我现在单击下载到pdf时，它会创建一个变形的pdf，并且不包含任何填充的信息，但不包含静态表单。

我认为这是因为html2canvas没有使用表单中的CSS，也没有使用您在页面上填写的数据。

所以也许这个解决方案并不适合我的需求，我没有其他解决方案。此外，当有解决方案时，表单太复杂，无法编辑每个字段，那么它必须是一种基本上自动将页面截屏为pdf或打印到pdf按钮的方法。

我需要什么：捕获CSS样式表单（或捕获整个页面作为屏幕截图）的方法，包括所有输入的数据（这是最重要的）。然后单击将其转换为pdf。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script>
    $(document).ready(function() {
    //Generate PDF
    function generatePDF() {
        window.scrollTo(0, 0);

        var pdf = new jsPDF('p', 'pt', [580, 630]);

        html2canvas($(".page1")[0], {
            onrendered: function(canvas) {
                document.body.appendChild(canvas);
                var ctx = canvas.getContext('2d');
                //ctx.scale(2, 2);
                var imgData = canvas.toDataURL("image/png", 1.0);
                var width = canvas.width;
                var height = canvas.clientHeight;
                pdf.addImage(imgData, 'PNG', 20, 20, (width - 10), (height));

            }
        });
        html2canvas($(".page2")[0], {
            allowTaint: true,
            onrendered: function(canvas) {
                var ctx = canvas.getContext('2d');
                ctx.scale(2, 2);
                var imgData = canvas.toDataURL("image/png", 1.0);
                var htmlH = $(".page2").height() + 100;
                var width = canvas.width;
                var height = canvas.clientHeight;
                pdf.addPage(580, htmlH);
                pdf.addImage(imgData, 'PNG', 20, 20, (width - 40), (height));
            }
        });
        html2canvas($(".page3")[0], {
            allowTaint: true,
            onrendered: function(canvas) {
                var ctx = canvas.getContext('2d');
                ctx.scale(2, 2);
                var imgData = canvas.toDataURL("image/png", 1.0);
                var htmlH = $(".page2").height() + 100;
                var width = canvas.width;
                var height = canvas.clientHeight;
                pdf.addPage(580, htmlH);
                pdf.addImage(imgData, 'PNG', 20, 20, (width - 40), (height));
            }
        });
             html2canvas($(".page4")[0], {
            allowTaint: true,
            onrendered: function(canvas) {
                var ctx = canvas.getContext('2d');
                ctx.scale(2, 2);
                var imgData = canvas.toDataURL("image/png", 1.0);
                var htmlH = $(".page2").height() + 100;
                var width = canvas.width;
                var height = canvas.clientHeight;
                pdf.addPage(580, htmlH);
                pdf.addImage(imgData, 'PNG', 20, 20, (width - 40), (height));
            }
        });
        setTimeout(function() {

            //jsPDF code to save file


            //Generate BLOB object
            var blob = pdf.output("blob");

            //Getting URL of blob object
            var blobURL = URL.createObjectURL(blob);

            //Showing PDF generated in iFrame element


            //Setting download link
            var downloadLink = document.getElementById('pdf-download-link');
            downloadLink.href = blobURL;
        }, 0);

    };
    generatePDF();
});
</script>
<style>.print-wrap { width: 500px; }</style>

下载填写的html表格为pdf

0 个答案: