How to download web pages as PDF in React JS

Подписаться 2,6 тыс.

Просмотров 27 тыс.

50% 1

In this tutorial, you will learn how to add a feature to your ReactJS application that allows users to download web pages as PDF files using html2canvas and jspdf libraries.
Firstly, you will install and set up the necessary libraries, including html2canvas, which is used to capture the HTML content of the web page as an image, and jspdf, which is used to convert the captured image into a PDF file.
Next, you will create a React component that captures the content of the web page using html2canvas and converts it into a base64 encoded image. You will then use jspdf to create a PDF document from the captured image and provide a download link for the user to save the file.
Throughout the tutorial, you will learn how to handle different scenarios, such as when the web page has multiple pages or when the captured image is too large, by splitting the image into multiple parts and combining them into a single PDF document.
By the end of this tutorial, you will have a complete understanding of how to download web pages as PDF files in ReactJS using html2canvas and jspdf libraries. This tutorial is suitable for anyone with a basic understanding of ReactJS and JavaScript.

Опубликовано:

14 апр 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 54

@user-vr7ku2rw3p 10 месяцев назад

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

@ajayprakashpp7229 8 месяцев назад

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 ♥

@anthonyezeh7511 6 месяцев назад

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

@showhow6827 8 месяцев назад

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?

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

@olufemiajibade 7 месяцев назад

Thanks for this, worked at first try 💯

@user-nl5zc6kc9i 9 месяцев назад

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

@skazzp Год назад

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

@CodePro-Jayanth Год назад

Thank you so much

@sunidhichouhan4103 10 месяцев назад

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

@abelmurua6980 7 месяцев назад

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

@minhtringuyen1267 5 месяцев назад

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

@vivekjaiswal2422 6 месяцев назад

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.☹

@user-pv2tx5np2g 9 месяцев назад

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

@MaharajanRavi 7 месяцев назад

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

@abhishekmeena2985 10 месяцев назад

thank you, it was helpful

@niveditasingh7691 5 месяцев назад

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

@yeshthummer7256 8 месяцев назад

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

@shubhamdas6519 7 месяцев назад

what if i am rendering the image from online link?

@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

@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

@hardikdangodara3272 5 месяцев назад

thank you so much sir

@SanjaySanjay-zg1jy 4 месяца назад

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

@g3zeck485 4 месяца назад

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

@himanshumukhedkar377 3 месяца назад

This is great! If have array of obj contains 5 Invoices and I want each invoice to be on new the page. How can we do that? For eg. 5 invoices means 5 page PDF?

@janmejaysingh5841 3 месяца назад

ye usko nahi aata...simple se utha ke bata diya complicated kisi ko nahi aata

@stan-beats 11 месяцев назад

thx

@shuvomajumder5565 5 месяцев назад

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

@tamimhossain4141 Месяц назад

great but how I download multiple page

@lubomirsevcik2252 5 месяцев назад

thx man

@abdulragib6004 10 месяцев назад

i follow same approach but it didn't work

@varadtote2017 9 месяцев назад

I got it right but image quality is too bad

@user-ni9cr7iq4u 6 месяцев назад

scrollable content not capturing

@DeveloperInside 7 месяцев назад

Can we select text and copy in generated pdf

@CodePro-Jayanth 7 месяцев назад

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

@kleatech6562 8 месяцев назад

please can you share the github link or the blog link

@jorgegarnicablanco8136 7 месяцев назад

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'); }); };

@anik1612 Год назад

informative

@cricketfan3322 Год назад

Ph er student naki?

@rodrigocastro3934 11 месяцев назад

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 11 месяцев назад

With this library you can create multi page pdf as well

@user-ni9cr7iq4u 6 месяцев назад

@@CodePro-Jayanth how

@varunsalat619 5 месяцев назад

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

@khaouitiabdelhakim 8 месяцев назад

Thanks alot. th source code pleaaaaaaaaaaaaaaase!

@roufhasan 6 месяцев назад

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

@lasith123 4 месяца назад

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'); }); };