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

แชร์
ฝัง
  • เผยแพร่เมื่อ 4 ต.ค. 2024

ความคิดเห็น • 31

  • @mohammadadnan9789
    @mohammadadnan9789 10 หลายเดือนก่อน +2

    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.7333 9 หลายเดือนก่อน +3

    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!

  • @AkshitAggarwal-lm7kz
    @AkshitAggarwal-lm7kz ปีที่แล้ว +1

    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

  • @gencomer
    @gencomer ปีที่แล้ว +1

    nice explanation, thanks

  • @fernandolucena6964
    @fernandolucena6964 ปีที่แล้ว +1

    eres el mejor

  • @mohammedal-muallim2028
    @mohammedal-muallim2028 ปีที่แล้ว +1

    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 ?

  • @mrdark4482
    @mrdark4482 2 ปีที่แล้ว +2

    thanks man got answer of a great headache

  • @toptopmovie10
    @toptopmovie10 11 หลายเดือนก่อน

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

  • @newtoncreation3428
    @newtoncreation3428 ปีที่แล้ว +1

    Thank you sir😊

  • @YannickLemelin
    @YannickLemelin ปีที่แล้ว +1

    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  ปีที่แล้ว +1

      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.

  • @bala-st9cj
    @bala-st9cj 2 ปีที่แล้ว +1

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

    • @webstylepress
      @webstylepress  2 ปีที่แล้ว

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

  • @aabirsabil4393
    @aabirsabil4393 2 ปีที่แล้ว +1

    Top

  • @prathutech3830
    @prathutech3830 9 หลายเดือนก่อน

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

  • @shwetankjoshi3011
    @shwetankjoshi3011 ปีที่แล้ว +1

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

    • @webstylepress
      @webstylepress  ปีที่แล้ว +1

      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.

  • @easypeasy9107
    @easypeasy9107 5 หลายเดือนก่อน

    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

  • @kutulloletageng1069
    @kutulloletageng1069 ปีที่แล้ว

    Can you generate interactive pdf that is responsive using JavaScript?

  • @engchoontan8483
    @engchoontan8483 8 หลายเดือนก่อน

    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 8 หลายเดือนก่อน

      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 8 หลายเดือนก่อน

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

  • @raymarkado2526
    @raymarkado2526 ปีที่แล้ว

    How do I print scrollable div?

    • @webstylepress
      @webstylepress  ปีที่แล้ว +1

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

  • @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

  • @uniquegaming8100
    @uniquegaming8100 2 ปีที่แล้ว

    Bro which vs code theme??