Converting HTML & CSS to PDF

preview_player
Показать описание
Hello everyone! In this video, I have posted a tutorial on how to convert your HTML to CSS into a PDF without losing some of your CSS and maintaining most of the resolution! This took tons of research and I spent a lot of hours on this, so hopefully this condensed video makes the process much easier for you!

Script files (convert } to ankle bracket):

If you found this helpful, don't forget to give a like to this video and subscribe to this channel! Additionally, don't forget to comment down so that I know which videos you're interested in me posting!

Happy Coding! :)

Timings:
0:00 : Create Basic HTML + CSS Document
1:42 : Create basic download function
4:00 : Set up beginning downloading steps
4:50 : Explaining the downloading process
6:50 : Create the jsPDF document
7:40 : html2canvas
9:50 : Adding image to jsPDF
10:55 : Download jsPDF command
11:48 : Test Code, Fix Resolution, Final Tips

Рекомендации по теме
Комментарии
Автор

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!

JoseIgordeSouza
Автор

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!

MarcosVinicius-jfmi
Автор

eres genial, de todos los videos que ví, relacinado a pdf, el tuyo fue el unico que me funciona, eres fanstastica

juancarlosguillengomez
Автор

It is very helpful for me as beginner in coding wold thank you for sharing your experience I do appreciate it

jayanaeverything
Автор

I think I love you. Thanks a lot, you safe my life.

alvarocr
Автор

Thank you for the video.. solved my problem ❤️❤️

reservedchery
Автор

I like your style right from the start. Really good and fast-paced description. Nice work!!!

PanosAnthoulis
Автор

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

mustafa
Автор

thank you very much for your contribution, it served me a lot

davidramirez
Автор

Are you sure you don't need to download html2canvas?

mohamedyamani
Автор

thank you so much this was very helpful, is there a way to centerize it inside the pdf ?

oussamaig
Автор

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

Nicpesca
Автор

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.

muhammadowais
Автор

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.

ambresaintclair
Автор

whenever i try to add my own <div> 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

chnouman
Автор

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

saireshma
Автор

After clicking download, pdf was not downloading could you please help me...

suneelkatta
Автор

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

ankitaburman
Автор

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?

McQueenx
Автор

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

saikirankorri