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">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">
...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!