Converting HTML & CSS to PDF

Подписаться 666

Просмотров 41 тыс.

50% 1

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):
{script src="cdnjs.cloudflare.com/ajax/lib..."}{/script}
{script src="cdnjs.cloudflare.com/ajax/lib..." }{/script}
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!
Here is my code: drive.google.com/drive/folder...
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
HTML/CSS Playlist: • Web Development

Опубликовано:

3 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 78

@JoseIgordeSouza Месяц назад

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!

@MarcosVinicius-jf1mi Год назад

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!

@jayanaeverything124 2 года назад

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

@Dapito04 2 года назад

Great work!

@reservedchery7547 2 года назад

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

@arturoprados317 8 месяцев назад

ahhhh thank you!!!

@muhammadnasirilyas8576 2 года назад

This is really cool.

@mustafa25804 2 года назад

Nice work :) thanks a lot

@theeye4650 2 года назад

very helpful video, Thanks

@PanosAnthoulis Год назад

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

@aguswidi9316 7 месяцев назад

Thank you. Very helpfull video

@juancarlosguillengomez6061 9 месяцев назад

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

@aromalunnikrishnan161 Год назад

Thank you.. thank you so much

@chrismarzarella2106 Год назад

Great video thank you

@davidramirez8291 2 года назад

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

@the_whiz 2 года назад

thank you for that comment :) it really motivates me to continue making videos

@davidramirez8291 2 года назад

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

@the_whiz 2 года назад

@@davidramirez8291 I haven't heard of this issue. Can you specify more on how to go about this process and why they need it?

@armanmalik9876 Год назад

your voice is so amazing.

@mustafa25804 2 года назад

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 2 года назад

thanks for the kind words! could you specify more about what you mean by "creating webpages with thumbnails of the content"?

@mustafa25804 2 года назад

@@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

@the_whiz 2 года назад

@@mustafa25804 no worries, thank you so much. that's great advice! ill try doing that.

@kimi7614 Год назад

Te amo me has salvado la nota

@alvarocr21 2 года назад

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

@LateOctober 2 года назад

thank you soo much

@cricBuss586 2 года назад

Ma'am Big fan from Pakistan

@muhammadowais3380 Год назад

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.

@mnz4829 Месяц назад

thank you.

@mutabazipeter5573 2 года назад

thank youuuuuuuuuuu

@ambresaintclair9211 2 года назад

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.

@the_whiz 2 года назад

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

@saireshma2089 2 года назад

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

@the_whiz 2 года назад

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

@louis.creative6679 2 года назад

Top!

@the_whiz 2 года назад

@chnouman7388 2 года назад

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

@the_whiz 2 года назад

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.

@saikirankorri2180 2 года назад

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

@the_whiz 2 года назад

can you send the html2canvas part of your code?

@McQueen2x 2 года назад

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?

@the_whiz 2 года назад

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(); } }

@uroojfatima9169 2 года назад

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.

@the_whiz 2 года назад

could you send your code? both of these issues I don't think I can solve without looking at what you did...

@ankitaburman5406 2 года назад

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

@the_whiz 2 года назад

Let me know if this resource doesn't help :) stackoverflow.com/questions/42039192/html-to-image-to-base64

@dj10schannel 3 месяца назад

👍

@mohamedyamani8502 Год назад

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

@Nicpesca Год назад

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

@the_whiz Год назад

it should, maybe try adding a wait?

@Nicpesca Год назад

@@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

@suneelkatta2473 Год назад

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

@the_whiz Год назад

I would assume there is an error with pdf generation. Inspect the page and look at console errors

@oussamaig9444 2 года назад

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

@the_whiz 2 года назад

i did just manually doing the coordinates by taking the div.width / 2 + pdf width / 2

@LateOctober 2 года назад

do i need to add the 2 values?

@the_whiz 2 года назад

@@LateOctober for it to be perfectly centered, i actually think it's pdf width / 2 - div width / 2

@LateOctober 2 года назад

@@the_whiz where is the pdf size ?

@the_whiz 2 года назад

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

@whoria1 2 года назад

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.

@the_whiz 2 года назад

sure!

@whoria1 2 года назад

@@the_whiz Thank you 🙏🙏 Where can I send it? Because it is a zip file

@the_whiz 2 года назад

@@whoria1 thekeyboard1010@gmail.com

@wellington18m Год назад

This solution just works for small amount of content. For 500 html lines, it does not print the whole content.

@the_whiz Год назад

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

@mohdibnealikhan4978 2 года назад

how to make perfect pdf ..is not pdf .This is taking screenshot of page .Then create pdf .

@the_whiz 2 года назад

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.