How to download web pages as PDF in React JS

[@ajayprakashpp7229]

I don't know how to express my gratitude to this video. You have given solution for a problem on which i have been wandering around for 2 days. Thank you ♥

[@SamGreen-n1l]

I love simple short tutorials that work. Thank you for this. Worked first time without any issues.

[@anthonyezeh7511]

I was able to integrate it following your steps. Everything works as instructed.

[@vivekjaiswal2422]

I have to download a scrollable div, but by using the above same logic I am unable to do it. I am getting only the current view port in pdf.☹

[@ashavytla8886]

okay but can we download web pages into word document with all the css styles....??

[@sunidhichouhan4103]

how can we make text selectable in pdf ? please help me oue.

[@JamesYang-i4k]

Hi bro, thank you so much, i just have a little problem when i download the PDF my images dont render in it

[@billyjoshuasalcedo3955]

how can you optimize the downloading time? I'm having trouble into downloading the pdf because it takes around 5 seconds before downloading the pdf. I'm using useRef for the DivElement and is passing down the scale to 1 to lower the graphics but to no avail.

[@g3zeck485]

Helo i have this error "incomplete or corrupt png file" Does anyone know the solution?

[@skazzp]

Great guide, everything worked from the first try, thank you

[@CodePro-Jayanth]

Thank you so much

[@minhtringuyen1267]

I have issue with the tag svg it's not render correctly, can u help me about this issue.

[@olufemiajibade]

Thanks for this, worked at first try 💯

[@abelmurua6980]

Thank you so much! Since I am using AWS ElasticBeanslkt Amazon Linux 2023, I couldn't use Puppeteer because of their environment its based on 64 bits. This solved my PDF need, I spent 2 days trying to find a solution, I appreciate your input!! thank you! The only thing I noticed is that TABLE layout its somehow off, not showing the same thing as it does on browser. th (headers) had some top padding on the cell, or the titles it self are alinged to bottom. I tried with lots of tailwindcss rules to reset that but I couldn't make it work, everything else looked great! I just removed the bg color so you cant tell there is a ht space.! Thank you again

[@SanjaySanjay-zg1jy]

I want to download in a new tab. How to do using ur code

[@showhow6827]

Great tutorial, simple and to the point. One major issue though. When the content is longer than the viewport or wider and or even when the you have the window resize to smaller one then the it will not convert the full content. Does anyone have an idea about solving this issue?

[@yeshthummer7256]

can i share a link using this package and save link and after save the pdf and open link from pdf ??

[@MaharajanRavi]

is there any other method to download as pdf with support svg images?

[@rukaiyajahan1172]

Thank you so much. such a helpful video . Go ahead, all the best

[@cricketfan3322]

Ph er student naki?

[@rukaiyajahan1172]

@@cricketfan3322 yes 🤔

[@cricketfan3322]

@@rukaiyajahan1172 amio same reason e ashchilam ekhane 😌😇

[@cricketfan3322]

@@rukaiyajahan1172 hmm done

[@tamimhossain4141]

great but how I download multiple page

[@niveditasingh7691]

If I need to add link to pdf, how does that work with this approach? @code pro

[@shubhamdas6519]

what if i am rendering the image from online link?

[@PrakashA-e1i]

how to take print long web page ? more than 1 page

[@SachinSingh-fs2xe]

did you find the logic?

[@rahulmohanty3822]

what is the font name ?

[@kanibis811]

thank you @code pro, that's what I needed. I wanted to know about the step guide that you created - have you used animation for rendering the steps one-by-one? Please do reply, I'm in the learning phase and it'd really help me. Also can you please share step-guide's github link?

[@CodePro-Jayanth]

Thank you, actually I have created animation for rendering step by step

[@hardikdangodara3272]

thank you so much sir

[@Arul_Sekar.S]

I have HTML link that link can convert into pdf

[@kleatech6562]

please can you share the github link or the blog link

[@jorgegarnicablanco8136]

const downloadPDF = () => { const input = quoteRef.current; html2canvas(input as HTMLElement).then((canvas) => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF('p', 'mm', 'a4', true); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const imgWidth = canvas.width; const imgHeight = canvas.height; const ratio = Math.min(pdfWidth / imgWidth, pdfHeight, imgHeight); const imgX = (pdfWidth - imgWidth * ratio) / 2; const imgY = 30; pdf.addImage( imgData, 'PNG', imgX, imgY, imgWidth * ratio, imgHeight * ratio ); pdf.save('cotizacion.pdf'); }); };

[@DeveloperInside]

Can we select text and copy in generated pdf

[@CodePro-Jayanth]

It's not possible in this approach, for that we need to use react-pdf library. In few days I will post the video for that

[@shuvomajumder5565]

I got an error. Uncaught (in promise) Error: Attempting to parse an unsupported color function "oklch".

[@olivierboulanger1118]

Excatly the same No salution ?

[@rodrigocastro3934]

This is not the correct approach. This is only converting the web into an image, and then paste it on a pdf. Consequently: final pdf has no text you can select and/or copy, it is just an image; and second, if you have several pages this method does not work. Does anyone has a correct solution? Please leave it bellow 🙏🏻

[@CodePro-Jayanth]

With this library you can create multi page pdf as well

[@Pkcollects]

@@CodePro-Jayanth how

[@varunsalat619]

yes how? I was creating a dynamic invoice pdf that's why came here..

[@anushkanemishte4538]

Please tell how

[@Pkcollects]

scrollable content not capturing

[@abdulragib6004]

i follow same approach but it didn't work

[@abhishekmeena2985]

thank you, it was helpful

[@kimothe2nd]

That did NOT download the cv..

[@varadtote2017]

I got it right but image quality is too bad

[@kanishkakodithuwakku1944]

thanx brother

[@lubomirsevcik2252]

thx man

[@anik1612]

informative

[@cricketfan3322]

Ph er student naki?

[@khaouitiabdelhakim]

Thanks alot. th source code pleaaaaaaaaaaaaaaase!

[@stan-beats]

thx

[@shubhampatil5935]

grow up from beginner mindset man.

[@roufhasan]

I am facing this error: Uncaught (in promise) Error: Attempting to parse an unsupported color function "oklch" html2canvas.js?v=82c7c37b:1685

[@lasith123]

const handleDownloadPDF = () => { const input = pdfRef.current; html2canvas(input).then((canvas) => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF('p', 'mm', 'a4', true); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const imgWidth = canvas.width; const imgHeight = canvas.height; const ratio = Math.min(pdfWidth / imgWidth, pdfHeight / imgHeight); const imgX = (pdfWidth - imgWidth * ratio) / 2; const imgY = 30; pdf.addImage( imgData, 'PNG', imgX, imgY, imgWidth * ratio, imgHeight * ratio, ); pdf.save('invoice.pdf'); }); };

[@ducnguyenminh5942]

thank bro!

[@billyjoshuasalcedo3955]

how can you optimize the downloading time? I'm having trouble into downloading the pdf because it takes around 5 seconds before downloading the pdf. I'm using useRef for the DivElement and is passing down the scale to 1 to lower the graphics but to no avail.

[@miakablan8792]

can you use workers ?