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 ♥
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
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?
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.
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 🙏🏻
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?
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.
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.
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.☹
Great guide, everything worked from the first try, thank you
Thank you so much
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
Thanks for this, worked at first try 💯
Helo i have this error "incomplete or corrupt png file" Does anyone know the solution?
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 we make text selectable in pdf
? please help me oue.
I have issue with the tag svg it's not render correctly, can u help me about this issue.
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?
okay but can we download web pages into word document with all the css styles....??
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.
I want to download in a new tab. How to do using ur code
Hi bro, thank you so much, i just have a little problem when i download the PDF my images dont render in it
what if i am rendering the image from online link?
what is the font name ?
If I need to add link to pdf, how does that work with this approach? @code pro
is there any other method to download as pdf with support svg images?
how to take print long web page ? more than 1 page
did you find the logic?
great but how I download multiple page
can i share a link using this package and save link and after save the pdf and open link from pdf ??
thank you so much sir
scrollable content not capturing
i follow same approach but it didn't work
thank you, it was helpful
I got an error. Uncaught (in promise) Error: Attempting to parse an unsupported color function "oklch".
Excatly the same
No salution ?
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
That did NOT download the cv..
I have HTML link that link can convert into pdf
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..
Please tell how
I got it right but image quality is too bad
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
thx man
thanx brother
informative
Ph er student naki?
Thanks alot. th source code pleaaaaaaaaaaaaaaase!
thx
grow up from beginner mindset man.
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 ?