const pdf new jsPDF() pdf.addImage(imgData, 'JPEG', 0, 0) pdf.save('download.pdf') Here the two zeroes are padding for the generated PDF document. 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. Next, we create a new PDF document and put the image inside that. We are going to take advantage of the callback function to add page numbering and header to our pages later on. Callback function is used to perform extra functionality on the pages generated. Y is the vertical distance from the y-coordinate of your PDF layout page. You need to replace the with your target url and #feature per your CSS selector. X is the horizontal distance from the x-coordinate of your PDF layout page. 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. Now I’d admit upon writing the code above the problem doesn’t seem that difficult, but in the thick of it, when I was hunting the internet for solutions and nothing was working when I came across this solution it was like manna from heaven.Content inside a. However, in the scenario where there’s no base64 pdf code when the user first lands on the site and they need to click a button to fetch the code from a database, how would you get this code above. Which works really well in modern browsers. Is there a way to do that using javascript or jQuery javascript jquery Share. Luckily html natively supports parsing base64 pdfs to normal ones and downloading them like so. I want to download that div as a pdf when user click on download button.

Saving a pdf as base 64 in the backend makes sense, but to the user it’s just a random combination of numbers and letters. I had this exact issue a while ago and couldn’t seem to find any good posts or articles covering it so I thought I’d create my own for future front end devs that might have the same problem. Possibly the longest and most specific title in a tech related Medium post I’ve written to date. Downloading a base 64 PDF from an api request in Javascript.

Javascript download page as pdf