DIV to PDF, Iframe to PDF using JavaScript Only (with CSS & Images Support)

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)
github.com/webstylepress/HTML...
jQuery PDF download tutorial
⭐ DIV to PDF, HTML to PDF using jQuery (with CSS & Images Support)
• DIV to PDF, HTML to PD...
- Figma to PDF Proper Export
• Figma to PDF Proper Ex...
- Multiple Pages PDF Export from Figma | Create PDF Easily
• Multiple Pages PDF Exp...
- Generate PDF File from Any Webpage | HTML to PDF
• Generate PDF File from...
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: / webstylepress
Website: www.webstylepress.com
FaceBook: / webstylepress
Twitter: / webstylepress
GitHub: github.com/webstylepress
#pdf #js #jsPDF #html2canvas #javascript #WebStylePress #pdfTools

Пікірлер: 31

  • @mohammadadnan9789
    @mohammadadnan97897 ай бұрын

    Perfect explanation. Been trying to do it for a while now. Couldn't find a good resource that explains it well. Well, finally I got to understand how it works. Thanks a lot, man! Wish you health! ❤

  • @niltonc.7333
    @niltonc.73336 ай бұрын

    Thanks so much for your video, what really helped me the most was about the correct versions of JSPDF and HTM2CANVAS, saying that i wiould also say that the PDF files for one page A4 even reducing the coordinates where never < 20MB in size, I change the PNG format to JPEG in both JSPDF and HTM2CANVAS and the file went down to 400Kb - just a tip!

  • @gencomer
    @gencomer Жыл бұрын

    nice explanation, thanks

  • @fernandolucena6964
    @fernandolucena6964 Жыл бұрын

    eres el mejor

  • @mohammedal-muallim2028
    @mohammedal-muallim2028 Жыл бұрын

    perfect this is what i have been looking for one question please , how to send the same PDF created (or same content) to the printer ?

  • @AkshitAggarwal-lm7kz
    @AkshitAggarwal-lm7kz Жыл бұрын

    Images was not appearing in my pdf but then I converted it into base 64 then eveyrthing seems to be working fine. Thanks a lot man !!

  • @vivek5147

    @vivek5147

    Жыл бұрын

    still, I am facing an error in showing image

  • @mrdark4482
    @mrdark4482 Жыл бұрын

    thanks man got answer of a great headache

  • @newtoncreation3428
    @newtoncreation3428 Жыл бұрын

    Thank you sir😊

  • @webstylepress

    @webstylepress

    Жыл бұрын

    Most welcome

  • @kutulloletageng1069
    @kutulloletageng1069 Жыл бұрын

    Can you generate interactive pdf that is responsive using JavaScript?

  • @aabirsabil4393
    @aabirsabil43932 жыл бұрын

    Top

  • @toptopmovie10
    @toptopmovie108 ай бұрын

    best work sir i need file download without i frame because when i download i fram style not proper shows in report

  • @prathutech3830
    @prathutech38306 ай бұрын

    hello bro in this method hyperlink or url work after converting pdf

  • @YannickLemelin
    @YannickLemelin Жыл бұрын

    Html2Canvas seems to not be able to handle some fonts. Sometimes the last line of a page gets cut in the middle and the other part of it is at the top of the next page...

  • @webstylepress

    @webstylepress

    Жыл бұрын

    If Html2Canvas is unable to handle some fonts and the last line of a page gets cut in the middle, there are several solutions you can try: - Use a different font: If the font you are using is causing the issue, try using a different font that Html2Canvas can handle properly. You can test different fonts to find one that works well with Html2Canvas. - Increase the canvas size: Sometimes, increasing the size of the canvas can help with this issue. This will give Html2Canvas more space to render the content and prevent lines from being cut off. You can experiment with different canvas sizes to see if this helps. - Use page breaks: If the content is being cut off at the end of a page, try adding a page break before the last line to force it onto the next page. You can use CSS to add a page break before the last line of a page. - Use a different library: If none of these solutions work, you may need to consider using a different library for your needs. There are other libraries available that can capture screenshots or create PDFs from HTML content. You can research and try different libraries to find one that works well for your specific use case. - Overall, the best solution will depend on the specific issue you are experiencing and the requirements of your project. By experimenting with different fonts, canvas sizes, page breaks, and libraries, you should be able to find a solution that works well for your needs.

  • @shwetankjoshi3011
    @shwetankjoshi3011 Жыл бұрын

    Sir can you tell me how can I send the pdf of web page directly to the mail using JS.

  • @webstylepress

    @webstylepress

    Жыл бұрын

    There are a few different ways you can send the PDF of a web page directly to an email using JavaScript: - Use a third-party API: There are several APIs available that allow you to generate a PDF of a web page and send it via email. For example, the PDF.js API allows you to generate a PDF of a web page and send it as an attachment in an email. - Use the html2canvas and jspdf libraries: You can use the html2canvas library to take a snapshot of a web page and convert it to a canvas element, and then use the jspdf library to convert the canvas element to a PDF. You can then use the Email.js library or the Mailto link to send the PDF as an attachment in an email. - Use the window.print() function: You can use the window.print() function to print the current web page to a PDF, and then use the Email.js library or the Mailto link to send the PDF as an attachment in an email.

  • @bala-st9cj
    @bala-st9cj Жыл бұрын

    Html2canvas decrease quality and exact size of @page size will not work

  • @webstylepress

    @webstylepress

    Жыл бұрын

    Need to play with the width and height to get the good quality.

  • @raymarkado2526
    @raymarkado2526 Жыл бұрын

    How do I print scrollable div?

  • @webstylepress

    @webstylepress

    Жыл бұрын

    I have multiple methods to generate PDF on the channel. plz search and see what fits your needs.

  • @uniquegaming8100
    @uniquegaming8100 Жыл бұрын

    Bro which vs code theme??

  • @webstylepress

    @webstylepress

    Жыл бұрын

    Ayu dark bordered

  • @x_y_e_n
    @x_y_e_n Жыл бұрын

    Can you please tell me your vscode theme name I'm really fan of pitch black dark themes

  • @webstylepress

    @webstylepress

    Жыл бұрын

    vscode theme is Ayu

  • @easypeasy9107
    @easypeasy91072 ай бұрын

    i have multiple data in div and in second page data is cutting off in 2nd and other pages

  • @VIRAJFF

    @VIRAJFF

    3 күн бұрын

    Copy karke 1st page pe aake display none krdo

  • @engchoontan8483
    @engchoontan84834 ай бұрын

    I treat PDF as zip, bz2, arj, ... IF Apache web-server or MS IIS or ... is configured to serve PDF and browser have PDF plug-in, then the webpage-script to PDF is pack-compress for delivery efficiency. JS in old and newer, are prone to china-hackers...

  • @engchoontan8483

    @engchoontan8483

    4 ай бұрын

    File-manager nautilus gets-renders HTML. File downloaders... Nowadays the lines are blured and the desktop should be X with libraries in theme or browser plug-in without windowing(remote PC - VNC, browser-OS GUI).

  • @engchoontan8483

    @engchoontan8483

    4 ай бұрын

    Matching pairing Server desktop to client-desktop(browser as container - VM) Server theme to client-theme(window-browser-window, tab, translate theme to theme)