search

eKoopmans / html2pdf.js

Client-side HTML-to-PDF rendering using pure JS.
MIT License
4.04k stars 1.37k forks source link

Custom Slider(expanded from input tag) not showing on PDF #390

Open codemaster730 opened 3 years ago

codemaster730 commented 3 years ago

Hi everyone!

I ran into a problem of not showing a custom slider on the pdf. Here is the original html page: image Here is the pdf exported. Slider has gone completely! image No idea why html2pdf skipped over this slider content?

cablegunmaster commented 3 years ago

https://www.w3schools.com/howto/howto_js_rangeslider.asp
does it even work with any of these sliders? (can you check this for me?) could be its an limitation of the library, if so its an issue, and need to be looked at.

codemaster730 commented 3 years ago

It didn't work. This is the original html page image After exporting pdf, image

codemaster730 commented 3 years ago

Default slider without any css. image After export image

cablegunmaster commented 3 years ago

Workaround ;

  1. not using sliders as its apparently not implemented;

  2. If the end result is just the result of a slider, you might want to modify the sliders input tag. This can be done by grabbing the element and modifying it using css and JSS to remove the input tag and grab the value from the input value, and paint a new Slider using a DIV and adding a line and and a dot using CSS, and add the amounts on each side. and underneath the dot.

Dont forget to clone the element first, otherwise you modify the original html.

Also to be honest, I have never seen a slider before on a pdf, so i'm wondering if this is a limitation of the PDF file extension itself. please correct me if i'm wrong.

codemaster730 commented 3 years ago

Good idea!

On Thu, Feb 18, 2021 at 3:15 AM Jasper notifications@github.com wrote:

Workaround ; Not using sliders as its apparently not implemented;

If the end result is just the result of a slider, you might want to modify the sliders input tag. This can be done by grabbing the element and modifying it using css and JSS to remove the input tag and grab the value from the tag , and just paint a new one by making a DIV and adding a line and fake a slider using CSS to make a line of X length using a div, and add the amount as a number underneath it.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/eKoopmans/html2pdf.js/issues/390#issuecomment-781236627, or unsubscribe https://github.com/notifications/unsubscribe-auth/AESKP5ZAH7K5UJDXGR2YPY3S7TSELANCNFSM4XC5F2KA .