This JavaScript code snippet helps you to print an HTML page as PDF file. It converts HTML content into a downloadable PDF file. When you click “generate PDF,” the script creates a downloadable PDF file. It helps save web content as PDFs.
It enhances user experience by providing a convenient way to save information. It’s especially useful for documents, reports, or articles that users may want to keep.
How to Create JavaScript Print Page as PDF
1. First, make sure you have the necessary libraries included in your HTML file. You’ll need jQuery and jsPDF. You can include them via CDN links in the <head> section of your HTML file.
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js'></script>
2. Your HTML should have a structure similar to the following code. Ensure your content to be printed is enclosed within a <div> with an id of "content". Additionally, you should have a button, identified by the id "cmd", which will trigger the PDF generation.
<div id="content"> <div class="wrapper"> <div class="box"> 1 Question <hr> Answer</div> <div class="box"> 2 Question <hr> Answer</div> <div class="box"> 3 Question <hr> Answer</div> <div class="box"> 4 Question <hr> Very very very loooooong loooooong loooooong loooooong loooooong loooooongAnswer</div> <div class="box"> 5 Question <hr> Answer</div> <div class="box"> 6 Question <hr> Answer</div> <div class="box"> 7 Question <hr> Answer</div> <div class="box"> 8 Question <hr> Answer</div> <div class="box"> 9 Question <hr> Answer</div> <div class="box">10 Question <hr> Answer</div> </div> </div> <div id="editor"></div> <button id="cmd">generate PDF</button>
3. If needed, customize the CSS styling to match your website’s design. The provided CSS styles the content layout into boxes, but you can adjust it as per your preference.
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-gap: 20px;
}
.box {
background-color: #555;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
4. Finally, copy the following JavaScript code and include it in a <script> tag in your HTML file or link it externally. This code initializes a new jsPDF instance and defines special element handlers for any additional elements you may have, such as an editor.
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
You can customize the PDF generation process by modifying parameters like the position of the content on the PDF page or adjusting the width of the content. You can also modify the filename for downloaded PDFs.
That’s all! hopefully, you have successfully created a feature to print page as a PDF file. If you have any questions or suggestions, feel free to comment below.
