Thanks. I'm having an issue. On small screen my receipt don't look good. Should we make a responsive design for that ? That will give another problem, we want only one pdf design for all devices
This is not the right approach.....it's an image .. 1. can't copy text from pdf file. 2. If there is scrolling you won't be able to capture full content
Really appreciate this but can you find other way without using canvas like without using image based approach is there any other way? Well there has to be but i tried like all the libs but facing issue in margin or formatting or in designing. Can you help?
I’m having a problem with my pdf not looking right. I’m missing certain inputs and etc. I tried changing it to landscape and I got everything now but the content is so squished. Wonder if there is a way to fix it.
@@JSSolutionsit’s a webpage that basically people want when approved a pdf is created and emailed to people. I’ve messed with different settings but can’t get the pdf to look correct. I’ve gotten it kind of close but it still cuts off the bottom of the page so I’m about to just give up at this point and call it good enough.
It was giving me errors in capture so i had to write it like this : const downloadPDF = () => { const capture = document.querySelector('.actual-certificate'); if (capture) { setLoader(true); html2canvas(capture as HTMLElement).then((canvas) => { const imgData = canvas.toDataURL('img/png'); const doc = new jsPDF(); const componentWidth = doc.internal.pageSize.getWidth(); const componentHeight = doc.internal.pageSize.getHeight(); doc.addImage(imgData, 'PNG', 0, 0, componentWidth, componentHeight); setLoader(false); doc.save('certificate.pdf'); }); } }; P.S , the images didn't download. only the text in my case.
Awesome. Just what i was looking for!
Really appreciate sharing GitHub link, most people forget to do that!
This is really great! Thank you so much man! Keep creating videos!
Thankyou for saving my time, really appreciate it
thanks so much bro your video saved me
Thanks. I'm having an issue. On small screen my receipt don't look good. Should we make a responsive design for that ? That will give another problem, we want only one pdf design for all devices
Receipt design should be consistent for every device, try to create your design in a popup or something like that
By using this can we also create dynamic pdf's?
You certainly download dynamic JSX, you can also draw the pdf using html2canvas but it is going to be a lot of work
Thank you so much for this video brother
Nice bro
This is not the right approach.....it's an image ..
1. can't copy text from pdf file.
2. If there is scrolling you won't be able to capture full content
do you know how can we do that?
have you found a solution? to get real pdf with several pages?
I am also facing the same issue in my project and it's a blocker. 😢😢
Have you found a solution?
Really appreciate this but can you find other way without using canvas like without using image based approach is there any other way? Well there has to be but i tried like all the libs but facing issue in margin or formatting or in designing. Can you help?
I will try
@@JSSolutions Yes Pls, Do try. I have tried using jspdf but it has multi page issue in margin. I also tried using kendopdf but its too much expensive.
I’m having a problem with my pdf not looking right. I’m missing certain inputs and etc. I tried changing it to landscape and I got everything now but the content is so squished. Wonder if there is a way to fix it.
What are you developing?
@@JSSolutionsit’s a webpage that basically people want when approved a pdf is created and emailed to people. I’ve messed with different settings but can’t get the pdf to look correct. I’ve gotten it kind of close but it still cuts off the bottom of the page so I’m about to just give up at this point and call it good enough.
what if page will be lengthy and we dont know how many pages will come in HTML?
You mean something dynamic? Explain your usecase, I will try to replicate the issue and try to comeup with a solution
this is working but the logo is not rendered when i generate to pdf.any idea why is it happening??
Check in console if your getting an CORS error
Thank you
easiest tutorial ever
nice but, but this will not work in real-world problems , pdf should be selectable. but in your solution pdf download as image pdf.
You mean selecting a portion of jsx or what?
thanks.
Helo i have this error "incomplete or corrupt png file" Does anyone know the solution?
It means the image is not there during process. Make sure to wait for the image to be ready before converting it to pdf
But why not ref?
It is not working my project
What is happening?
I need dynamic PDF is there any solution for this ?
I think you can create dynamic pdf with this approach if that is what you meant. I have done it in my projects.
It was giving me errors in capture so i had to write it like this :
const downloadPDF = () => {
const capture = document.querySelector('.actual-certificate');
if (capture) {
setLoader(true);
html2canvas(capture as HTMLElement).then((canvas) => {
const imgData = canvas.toDataURL('img/png');
const doc = new jsPDF();
const componentWidth = doc.internal.pageSize.getWidth();
const componentHeight = doc.internal.pageSize.getHeight();
doc.addImage(imgData, 'PNG', 0, 0, componentWidth, componentHeight);
setLoader(false);
doc.save('certificate.pdf');
});
}
};
P.S , the images didn't download. only the text in my case.
this give me screenshort
Nishad vai