you can code anything in this div but the most important part is the div ID or I would say element ID, which will be a reference to the PDF generation code for the html2pdf library. In our code, from line 40–82 is the element code, where we have to design the grey-bordered central element which has to be exported to pdf. Line 40–82: The Div(Content) to be exported

Line 12 and 13 are important, here we are integrating CDNs of jsPDF and html2pdf libraries. Note : Use of Bootstrap is purely optional.

Line 7–13: Integration of all important CDNs įirstly integrate a stylesheet file style.css, where you want some look and feel tweaks in CSS, then I added Bootstrap CSS bundle and Bootstrap JS library CDNs, just for better webpage creation. Here, we are going to use jsPDF and html2pdf. There are many JavaScript libraries we could use here, including: Simple to implement for basic requirements.Ĭlient side PDF generation is all about browsers’ API calls, which JavaScript and its related libraries consume to get things done.The solution is great for handling static websites.All the computation to generate a PDF file will happen on the client machine - this can be faster than sending to the server and generating there.The easier solution involves exporting a webpage on the client side.įirst, let’s understand the benefits hereL The server side PDF approach is quite expensive and complex. Client (browser) side PDF file generation.

There are two approaches to exporting a webpage to PDF: Now, when the page is loaded an image screenshot will now be created in the same location as the script tag, which will contain all of the contents of the features div and nothing else.Hustling around to simply export a webpage to a PDF file or do you just want to export something from your webpage to PDF and want a simple solution? You need to replace the with your target url and #feature per your CSS selector. Html2canvas($('.html-content')).then(function (canvas) ).Create() Var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1 Var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2) Var PDF_Width = HTML_Width + (top_left_margin * 2) Var HTML_Height = $('.html-content').height() Var HTML_Width = $('.html-content').width() Then call below function, //Create PDf from HTML. can be downloaded as pdf with styles using jspdf & html2canvas.

Javascript download page as pdf