How to download web pages as PDF in React JS
ฝัง
- เผยแพร่เมื่อ 14 เม.ย. 2023
- 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.
I love simple short tutorials that work. Thank you for this. Worked first time without any issues.
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 ♥
I was able to integrate it following your steps. Everything works as instructed.
Thanks for this, worked at first try 💯
Great guide, everything worked from the first try, thank you
Thank you so much
thank you, it was helpful
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?
Thank you so much. such a helpful video . Go ahead, all the best
Ph er student naki?
@@cricketfan3322 yes 🤔
@@rukaiyajahan1172 amio same reason e ashchilam ekhane 😌😇
@@rukaiyajahan1172 hmm done
thank you so much sir
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
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.
Hi bro, thank you so much, i just have a little problem when i download the PDF my images dont render in it
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.☹
thx man
thanx brother
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?
Thank you, actually I have created animation for rendering step by step
how to take print long web page ? more than 1 page
I have issue with the tag svg it's not render correctly, can u help me about this issue.
how can we make text selectable in pdf
? please help me oue.
is there any other method to download as pdf with support svg images?
thx
If I need to add link to pdf, how does that work with this approach? @code pro
can i share a link using this package and save link and after save the pdf and open link from pdf ??
I want to download in a new tab. How to do using ur code
what if i am rendering the image from online link?
Helo i have this error "incomplete or corrupt png file" Does anyone know the solution?
great but how I download multiple page
informative
Ph er student naki?
what is the font name ?
I got it right but image quality is too bad
i follow same approach but it didn't work
That did NOT download the cv..
scrollable content not capturing
Can we select text and copy in generated pdf
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
please can you share the github link or the blog link
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');
});
};
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 🙏🏻
With this library you can create multi page pdf as well
@@CodePro-Jayanth how
yes how? I was creating a dynamic invoice pdf that's why came here..
I got an error. Uncaught (in promise) Error: Attempting to parse an unsupported color function "oklch".
Excatly the same
No salution ?
Thanks alot. th source code pleaaaaaaaaaaaaaaase!
I am facing this error: Uncaught (in promise) Error: Attempting to parse an unsupported color function "oklch"
html2canvas.js?v=82c7c37b:1685
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');
});
};
thank bro!
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.
can you use workers ?