使用多个“选择”选项生成PDF？

Question

I have a page showing a list of "selected" members with "ranks" and "year" and I want it to a pdf without showing the buttons.

How can I generate such a PDF without losing the style?

I've tried using plain jsPDF but it returns only some values but not (select) tags

<?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>';
?>

Refer to the screenshot beneath

I want the PDF to show exactly the way it's on web page. Is this only achievable with html2canvas?

Answer 1

You want to use jsPDF's .html() and html2canvas 1.0.0-alpha.12, not .fromHtml(). You may modify the following code for your php and put data-html2canvas-ignore="true" to the buttons you want to hide.

<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>