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