javascript - 将填写好的 html 表单下载为 pdf

Question

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

我尝试使用下面的代码 (html2canvas)。我用 class="print-wrap page1"等包装了 Form 的 4 页。当我现在点击下载到 pdf 时，它会创建一个变形的 pdf，不包含任何填充信息，而是静态形式。

我认为发生这种情况是因为 html2canvas 没有使用 Form 中的 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>

Answer 1

试试像这样的插件 https://github.com/eKoopmans/html2pdf

下载源码并添加

然后

var element = document.getElementById('element-to-print');
 html2pdf(element, {
     margin:       1,
     filename:     'myfile.pdf',
     image:        { type: 'jpeg', quality: 0.98 },
     html2canvas:  { dpi: 192, letterRendering: true },
     jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait'}
});

希望对你有帮助