PDF Converter

Using vanilla JavaScript only, convert DIV, page or iframe content into PDF and direct download it. No jQuery needed. I will go through a series of techniques to generate PDF from page or section of page or from iframe using JavaScript and some libraries but not any jQuery plugin. I will use jQuery for selectors only. Other than that, no jQuery required. You can replace jQuery selectors with vanilla JavaScript selectors. At the bottom I have shared two versions of code – with and without jQuery. So This technique is not dependent on jQuery.

I have linked Bootstrap and jQuery. I have my custom js file for custom JS script. Use localhost or live server to test and develop this. Simple page url in web browser from local machine may not work properly. I am using localhost from vscode via an extension.

⭐1- Window Print
Let’s generate PDF for the index page. Use simple print function on window object. It’s not jQuery window, it’s just window object – in vanilla javascript. This will fire up the window with print option and PDF download option.

⭐ 2- Window print on iframe
How about using same technique to generate PDF from iframe. iframe is loading another page that is receipt page. just use contentWindow on iframe element and use print function. Again this is vanilla JavaScript. So this is working but there is an issue. Original webpage has background color for the table head. But the PDF is without background color in table head. We can use print specific media query and use dark text color for the text inside table head. This solves the issue but not quite. And CSS for print color adjust exact is also not working in this case. Not even with asterisk and not even with important rule. So I am bound to change the style for print to adjust PDF. So it works as well with some tweak.

⭐ 3- jsPDF & html2canvas / Generating PDF from DIV on Same Page
We will use jsPDF and html2canvas to generate and download PDF from the webpage. It will be direct download. No prompt or confirmation window. All by using JavaScript. We are using two libraries – one is jsPDF and other is html2canvas. By using these javascript libraries, we can generate PDF from a page or from a portion of page and direct download it – using only javascript.

Note the versions of these libraries. These are CDN inks. jsPDF version is 1.3.4 and html2canvas version is 1.3.4. Use same versions if you are following along with this tutorial. Older versions will not work. They had different settings. Mind the versions here.

We use html2canvas library to get the canvas for required section that we are going to get PDF from and convert it into base64image image. Then we are using jsPDF and p is document orientation. p means portrait and px is for pixels. If we look at A4 document size in pixels it’s around 3508px and 2480px. I have proportionally decreased it down to meet our needs here. So 1600, 1131 is width and height in pixels. You will have to adjust these according to your need. Then we used addImage function to draw base64image over pdf. 15 is left and top margins. 1110 and 381 are width and height. This is approximate width and height of my HTML content area. We used save function to download pdf and named it as well. You will have to play with the width and height to adjust it – I have adjusted it according to my need that is serving me in my example. By using html2canvas we converted required area into base64image and then we applied addImage fnction, and save function to direct download pdf.

⭐ 4- jsPDF & html2canvas / Generating PDF from iFrame Content / External Page
Just use additional contentWindow on iframe in above script and you are good to go. And now we will have our receipt downloaded as PDF document. Images and backgrounds and colors and everything.

So this is how we can generate PDF and direct download PDF from a page, from content on page or from an external page.

⭐ Download Code (jQuery & without jQUery)

jQuery PDF download tutorial
⭐ DIV to PDF, HTML to PDF using jQuery (with CSS & Images Support)

– Figma to PDF Proper Export

– Multiple Pages PDF Export from Figma | Create PDF Easily

– Generate PDF File from Any Webpage | HTML to PDF

TIMESTAMPS
00:00 INTRO
01:14 Vanilla JS Full Page PDF Download
04:32 Vanilla JS PDF Download from iframe
07:14 DIV to PDF / Direct Download / jsPDF & HTML2Canvas
15:09 Iframe to PDF / Direct Download / jsPDF & HTML2Canvas

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

Channel:
Website:
FaceBook:
Twitter:
GitHub:
#pdf #js #jsPDF #html2canvas #javascript #WebStylePress #pdfTools…(read more)

Convert Word 2 PDF: Word to PDF Converter

Convert PowerPoint 2 PDF: PPT to PDF Converter

Convert Excel 2 PDF: Excel to PDF Converter

Convert an Image 2 PDF: Image to PDF Converter

Convert HTML 2 PDF: HTML to PDF Converter

More Tools: PDF Converter