You're amazing, I tried everything and nothing worked, just yours!! I was able to export a dynamic generated table with css and export to PDF just as it was shown in the result before exportation!! Thank you so much. You just got a subscriber!
You're so talented and have good ways to explain things. If you can make some videos about creating webpages with thumbnails of the content, videos would be more noticeable. You just saved me with this video and you truly deserve much more followers
@@the_whiz Thanks for replying :) I mean people love to watch things from scratch, so if you make videos to create websites from scratch would be awesome. And the thumbnail of the video will be the final look of the page that you created in the same video instead of the thumbnails you're using in you whole videos. Haha sorry for my bad English
Thanks that was really helpful. I do have some questions, currently I'm in the process of converting HTML into pdf , but is there is any way to make HTML anchor element working in pdf too. Like giving your profile link & in pdf by clicking it in there it should work.
Thanks miss for your video (I'm french sorry for my english). My javascript is beginner. If I understood correctly each element of the HTML must be by canvas as for the img element at code line 38 so if I have a complete code page of a document I have to take element by element of the HTML? Is it not possible to recover all the HTML in the javascript with body, so work with canvas on the entire body of a document without splitting the body elements of the HTML? If so, thank you for your next video.
Thank you for your comment! Indeed you can get all the HTML at once using document.body.getElementsByTagName("body"); instead of the document.getElementById(...) This will allow you to convert all the HTML into an image that you can put onto the pdf
Hello Whiz Girl, I tried this approach ,but for me the html2canvas promise is getting rejected saying "Proxy must be used when rendering url" ..Anything that i am missing .I followed the same steps like yours
this is the best method I know. if I find a better one, I will let you know, but if this doesn't work, I suggest starting with lots of research like I did to initially make this video.
whenever i try to add my own to the existing code the button appears on top and when i click the download button, It only downloads the "downloading please." text not the intended div. here is my code
I don't see your attached code, but make sure to change the document.getElementById("whatToPrint") to the id of your div. Also, if you don't want the button to come into your PDF, then add the div outside the whatToPrint div.
Hi I need to generate multiple pdf pages and pages are generating depending on the input I am passing..my issue is I need to add header margin and in footer page number to all the pages..can you help me out in this
I think this has a great solution: stackoverflow.com/questions/33515127/c-to-pdf-using-jspdf , add the footer and header manually before you add another page bc you can set the origin of the text
@@the_whiz I think the reason it doesn't work for them is that they should have a server running like apache, this is due to security issues since you work with files from your PC.
hai mam how can i export if there are some images are their which i have given src url when i exported entire html the images are missing .may be i though it was cors error could please help with that
Hi Whiz Girl! I created a CV using HTML and CSS, is it possible if I send you my code that I could get help pulling it down like a PDF? Am having difficulties when following the tutorial.
Hey! So it works but I need to show more than one page, but its only showing the first page using this code. How do I change to show all the data i need?
sure, this command will create another page: doc.addPage(); here is an example from work I've done in the past: for (var i = 0; i < stringHTML.length; i++) { await html2canvas(stringHTML[i], { allowTaint: true, useCORS: true, width: 1780 }).then((canvas) => { doc.addImage(canvas.toDataURL("image/png"), 'PNG', 5, 5, width * 1.13, width * 0.68); });
if (i + 1 != stringHTML.length) { doc.addPage(); } }
The pdf gets downloaded as soon as page loads without the button being clicked (if I call function on button click) In case of anchor tag like you did the pdf appears to be empty.
You're amazing, I tried everything and nothing worked, just yours!! I was able to export a dynamic generated table with css and export to PDF just as it was shown in the result before exportation!! Thank you so much. You just got a subscriber!
Thanks so much, I made this code in ReactJs and worked well. I have spended a lot of time to resolve that task. So, thank you!
eres genial, de todos los videos que ví, relacinado a pdf, el tuyo fue el unico que me funciona, eres fanstastica
Thank you. Very helpfull video
It is very helpful for me as beginner in coding wold thank you for sharing your experience I do appreciate it
Thank you.. thank you so much
You're so talented and have good ways to explain things. If you can make some videos about creating webpages with thumbnails of the content, videos would be more noticeable. You just saved me with this video and you truly deserve much more followers
thanks for the kind words! could you specify more about what you mean by "creating webpages with thumbnails of the content"?
@@the_whiz Thanks for replying :) I mean people love to watch things from scratch, so if you make videos to create websites from scratch would be awesome. And the thumbnail of the video will be the final look of the page that you created in the same video instead of the thumbnails you're using in you whole videos. Haha sorry for my bad English
@@mustafa25804 no worries, thank you so much. that's great advice! ill try doing that.
I like your style right from the start. Really good and fast-paced description. Nice work!!!
hello, I have a question. Why in my document doesn't appear a image that I load from a URL? Exist any way to show in my document? Thank you
it should, maybe try adding a wait?
@@the_whiz the problema Is a DOMexception. I try yo download the image in my pc but it doesn't work. Maybe any way to Solve this? Thank you
Thank you for the video.. solved my problem ❤️❤️
Thanks that was really helpful. I do have some questions, currently I'm in the process of converting HTML into pdf , but is there is any way to make HTML anchor element working in pdf too. Like giving your profile link & in pdf by clicking it in there it should work.
Thanks miss for your video (I'm french sorry for my english). My javascript is beginner. If I understood correctly each element of the HTML must be by canvas as for the img element at code line 38 so if I have a complete code page of a document I have to take element by element of the HTML? Is it not possible to recover all the HTML in the javascript with body, so work with canvas on the entire body of a document without splitting the body elements of the HTML?
If so, thank you for your next video.
Thank you for your comment! Indeed you can get all the HTML at once using
document.body.getElementsByTagName("body");
instead of the document.getElementById(...)
This will allow you to convert all the HTML into an image that you can put onto the pdf
ahhhh thank you!!!
Great video thank you
Are you sure you don't need to download html2canvas?
very helpful video, Thanks
your voice is so amazing.
Nice work :) thanks a lot
I think I love you. Thanks a lot, you safe my life.
This is really cool.
Te amo me has salvado la nota
After clicking download , pdf was not downloading could you please help me...
I would assume there is an error with pdf generation. Inspect the page and look at console errors
Hello Whiz Girl, I tried this approach ,but for me the html2canvas promise is getting rejected saying "Proxy must be used when rendering url" ..Anything that i am missing .I followed the same steps like yours
Let me know if this resource doesn't help :) stackoverflow.com/questions/42039192/html-to-image-to-base64
how to make perfect pdf ..is not pdf .This is taking screenshot of page .Then create pdf .
this is the best method I know. if I find a better one, I will let you know, but if this doesn't work, I suggest starting with lots of research like I did to initially make this video.
whenever i try to add my own to the existing code the button appears on top and when i click the download button, It only downloads the "downloading please." text not the intended div.
here is my code
I don't see your attached code, but make sure to change the document.getElementById("whatToPrint") to the id of your div. Also, if you don't want the button to come into your PDF, then add the div outside the whatToPrint div.
Hi I need to generate multiple pdf pages and pages are generating depending on the input I am passing..my issue is I need to add header margin and in footer page number to all the pages..can you help me out in this
I think this has a great solution: stackoverflow.com/questions/33515127/c-to-pdf-using-jspdf , add the footer and header manually before you add another page bc you can set the origin of the text
Great work!
thank you very much for your contribution, it served me a lot
thank you for that comment :) it really motivates me to continue making videos
@@the_whiz I think the reason it doesn't work for them is that they should have a server running like apache, this is due to security issues since you work with files from your PC.
@@davidramirez8291 I haven't heard of this issue. Can you specify more on how to go about this process and why they need it?
hai mam how can i export if there are some images are their which i have given src url when i exported entire html the images are missing .may be i though it was cors error could please help with that
can you send the html2canvas part of your code?
Ma'am Big fan from Pakistan
Hi Whiz Girl!
I created a CV using HTML and CSS, is it possible if I send you my code that I could get help pulling it down like a PDF? Am having difficulties when following the tutorial.
sure!
@@the_whiz Thank you 🙏🙏
Where can I send it?
Because it is a zip file
@@whoria1 thekeyboard1010@gmail.com
Hey! So it works but I need to show more than one page, but its only showing the first page using this code. How do I change to show all the data i need?
sure, this command will create another page: doc.addPage();
here is an example from work I've done in the past:
for (var i = 0; i < stringHTML.length; i++) {
await html2canvas(stringHTML[i], {
allowTaint: true,
useCORS: true,
width: 1780
}).then((canvas) => {
doc.addImage(canvas.toDataURL("image/png"), 'PNG', 5, 5, width * 1.13, width * 0.68);
});
if (i + 1 != stringHTML.length) {
doc.addPage();
}
}
thank you.
This solution just works for small amount of content. For 500 html lines, it does not print the whole content.
yep, it's because it gets cut off. the solution is to print some of the HTML code, create a new page in the pdf, and print the rest of the HTML code
The pdf gets downloaded as soon as page loads without the button being clicked (if I call function on button click) In case of anchor tag like you did the pdf appears to be empty.
could you send your code? both of these issues I don't think I can solve without looking at what you did...
thank you so much this was very helpful, is there a way to centerize it inside the pdf ?
i did just manually doing the coordinates by taking the div.width / 2 + pdf width / 2
do i need to add the 2 values?
@@LateOctober for it to be perfectly centered, i actually think it's pdf width / 2 - div width / 2
@@the_whiz where is the pdf size ?
@@LateOctober new jsPDF('l', 'pt'); This is the line that determines the pdf size. For example, the l says that it is a letter-sized document.
Top!
:D
thank youuuuuuuuuuu
👍
not working
What is not working? Would it be possible to send your code because it works for me?
@@the_whiz to send your code please)
@@ЕвгенийРумянцев-з1ц My code can be found in the description box.
works perfectly
You must have a server running for it to work for security reasons
Ur a girl?
yep :) go female in STEM!!!
thank you soo much