生成带有多个“选择”选项的PDF？

Question

我有一个页面，显示具有“等级”和“年份”的“选定”成员的列表，以及 我希望它显示为pdf而不显示按钮。

如何在不丢失样式的情况下生成此类PDF？

我尝试使用普通的jsPDF，但它仅返回一些值，但不返回（选择）标签

<?php
echo '<script>';
 echo 'function onClick() {';
 echo "var pdf = new jsPDF('p', 'pt', 'letter');";
 echo 'pdf.canvas.height = 72 * 11;';
 echo 'pdf.canvas.width = 72 * 8.5;';
 echo "pdf.fromHTML($('.matrikule').get(0), 10, 10, {'width': 180});";
 echo 'pdf.save("test.pdf");';
 echo '};';
    echo 'var element = document.getElementById("clickbind");';
    echo 'element.addEventListener("click", onClick);';
    echo '</script>';
?>

请参阅下面的屏幕截图

我希望PDF能够准确显示其在网页上的显示方式。 这是只能通过html2canvas实现的吗？

Answer 1

您要使用jsPDF的.html()和html2canvas 1.0.0-alpha.12，而不是.fromHtml()。您可以为您的php修改以下代码，并将data-html2canvas-ignore="true"放在要隐藏的按钮上。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" 
        integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
        crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<!-- html2canvas 1.0.0-alpha.11 or higher version is needed -->

<script>
    function onClick() {
        let pdf = new jsPDF('p', 'pt', 'letter');
        pdf.html(document.getElementById('clickbind'), {
            callback: function () {
                pdf.save('test.pdf');
                window.open(pdf.output('bloburl')); // this makes debug easier.
            }
        });
    }
</script>