I have a button 'Generate PDF', and I want it to save some div elements as a PDF file. From what I read, I best use JavaScript, but I have zero experience with JS. I already tried third party solutions like html2pdf, pdfmyurl, jsPDF, etc., but I didn't manage to get it to work like I want it.
This is the structure of the HTML file:
<!DOCTYPE html>
<html>
<head>
<title>This is my title</title>
</head>
<body>
<!-- HEADER -->
<div class="header">
<img src="../logo/logo_17.png" width="320" height="100" />
</div>
<!-- MENU -->
<div class="topnav" id="myTopnav">
Menu...
</div>
<!-- KOLOMMEN -->
<div class="row">
<!-- LINKSE KOLOM -->
<div class="prodtitle" id="htmlContent1">Title</div>
<div class="prodbuttons">
<a class="h2button" href="#">BACK TO LIST</a>
<button id="generatePDF" class="h2button">generate PDF</button>
</div>
<div class="prodinfotitle">Info/Description</div>
<div class="prodinfo" id="htmlContent2">
...some text
</div>
<div class="prodmaterialstitle">Materials/Ingredients</div>
<div class="prodmaterials">
...some text
</div>
<div class="gallery">
...image 1 (if available)
</div>
<div class="gallery">
...image 2 (if available)
</div>
<!-- RECHTSE KOLOM -->
<div class="side">
...
</div>
</div>
<!-- FOOTER -->
<div class="footer">
...footer
</div>
</body>
</html> Now this is what I'm looking for:
When you click the 'Generate PDF' button, a PDF file should be created with the following div's: 'header', followed by the 'prodtitle' and then followed by 'prodinfotitle', 'prodinfo', 'prodmaterialstitle', 'prodmaterials' and the picture(s), if they're available. The PDF should then be saved as '[prodtitle].pdf', so that every file has the right title.
Can somebody help me with this piece of code and how to set it up?
Thanks very very much!
Update: Something I tried with my zero experience was this:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script type="text/javascript">
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#generatePDF').click(function () {
doc.fromHTML($('#htmlContent1').html(), 15, 15, {
'width': 700,
'elementHandlers': specialElementHandlers
});
doc.fromHTML($('#htmlContent2').html(), 15, 15, {
'width': 700,
'elementHandlers': specialElementHandlers
});
doc.save('sample_file.pdf');
});
</script>It didn't work because I got an empty pdf. I don't even know if the code is correct.
No comments:
Post a Comment