Screenshot a Webpage and Convert to PDF Using ReactJS | HTML2Canvas & JSPDF

Подписаться 7 тыс.

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

50% 1

Yo! In this video we'll learn how to take a screenshot of your app and covnert it into a pdf using react. I truly hope you enjoy and keep learning :D
Chapters:
0:00 Introduction
0:51 Create React App and Install Dependencies
1:31 Setup PDFContent Component
6:59 Learn How to Use HTML2Canvas and JSPDF
8:00 Error Fixing
8:01 Testing App
8:25 End
DOCS: www.npmjs.com/package/jspdf, www.npmjs.com/package/html2ca...
REPO: github.com/arslanah99/jspdfht...
Please don't forget Like, Comment and Subscribe if you're new! Support the channel 😁: www.paypal.com/donate/?busine...

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

11 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Thanks so much! This is the only tutorial that actually helped. Keep up the good work!

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

No worries glad I could help 😃

@abbishek Год назад

This Video is super helpful! Thank you!!!

@arslan99 Год назад

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

very cool. thanks for the tutorial on this - I dropped a like 👍👍

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

Haha thanks man. I started getting bored with Mui so I figured lemme stop that and find somethin' else 🤣

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

@@arslan99 I feel you on that. Def a nice change of pace. I like learning about new librarian like this one.

@codedByAyush Год назад

This tutorial is super helpful!

@arslan99 Год назад

Glad I could help

@ZentixStore Год назад

Thank you for this video :D

@arslan99 Год назад

Np bro

@nareshvasuja3506 Год назад

thanks, tried ways watching few videos, didn't work, but yours actually did, so thanks, just have to download that jsPDF package extra, which you didn't tell, anyways, great work, keep it up

@arslan99 Год назад

Np bro glad I could help

@arslan99 Год назад

Oh btw what was the extra package if you don't mind me asking? Probably could make a small vid on it if it helps others

@nareshvasuja3506 Год назад

@@arslan99 jsPDF, I had to download it with npm

@arslan99 Год назад

@@nareshvasuja3506 ohhhhh lmao 🤣🤣 my bad I got confused I thought you downloaded another npm package to download a jspdf 🤣🤣

@nareshvasuja3506 Год назад

@@arslan99 oh, sorry, my bad 😂

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

helpful tutorial, thank you

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

No worries

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

How to take screenshot of the content which is scrollable and have height more than the viewport also that div can be scaled (transform: scale()) using input range, but what i want the preview of the div with default scale value so that even user zoomed it up and clicks on preview it should get fixedsize of the div as an image no matter what the current state of scale is.

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

It was very useful, thank you very much !! Something happens to me, when I use images that I have stored locally it works without a problem but when I use images with external links, that space appears empty in the PDF, do you know what happens?

@alexisgiozza4695 Год назад

Good tutorial :3

@billyjoshuasalcedo3955 Год назад

hi how can you optimized the downloading process? mine takes 5 seconds to download the pdf. Im using useRef to get the HTMLDivElement and the jsdf

@arslan99 Год назад

Optimization is something that I'm not too sure about right now because this is also one of the first times I've ever used this package

@revanthvallapureddy3653 10 месяцев назад

I am getting images from the S3 bucket, but they are not being added to the pdf, how can I include those images as well?

@arslan99 10 месяцев назад

Not too sure

@yashwanthsrini Год назад

Thanks

@arslan99 Год назад

@remitto8367 Год назад

Thanks for the tutorial, I've got it working but the image quality is kinda poor. Any way I can tweak it to improve this?

@remitto8367 Год назад

Ah, I fixed it. Thanks again :D

@bhaskarrijal Год назад

@@remitto8367 How did you do it? Mind sharing?

@PedroPaulo-fb7wi 2 года назад

Hi, thanks for the video. It seems that your repo shows the default code after create-react-app, can you fix this?

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

Oh damn. My bad if I get time I'll check it out. Sorry about that

@PedroPaulo-fb7wi 2 года назад

@@arslan99 Don't worry. Thanks again

@SOURAVKUMAR-di4xg Год назад

@@arslan99 please get it update

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

Thanks for great the tutorial! Question: how to print multi pages instead of only 1 page?

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

This stack overflow article should help stackoverflow.com/questions/57624705/multiple-pages-with-jspdf-using-html2canvas

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

a great video man.. i havw slight issue with this pluginquality is poor. I wonder if you have a solution for that.

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

If it is poor is recommend checking out the html2canvas docs there maybe b something there

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

I'm a bit of a newbie developer. Is there a way to do this where it exports a react component to pdf without rendering it on screen? I'm trying to generate a report but I want the pdf file to be formatted differently and show extra data to what is being displayed on the current page.

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

You can try to follow this tutorial it will point you into the right direction hope it helps ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JU7rfAMpbZA.html

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

@@arslan99 Thank you!

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

@infinitetsukuyomi7019 Год назад

How to fit the whole content into a single pdf page without breaking?

@arslan99 Год назад

Unfortunately I'm not too sure sorry

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

The repo is a blank React app

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

Really 😱 damn. My bad I'll fix it ASAP when I get a chance sorry about that

@juanpedro_mario Год назад

it seems it does not support clip-path CSS

@arslan99 Год назад

What is clip path?

@juanpedro_mario Год назад

@@arslan99 sorry I wasn't clear. It did exactly what I wanted but the image in the pdf has a different style to what is in my tsx. It ignores CSS properties like clip-path and doesn't really show linear-gradients the exact way. Its definitely coming from the dependency but how do I combat this?

@arslan99 Год назад

Oh unfortunately I do not know how to do that because I've never dealt with that before I'm sorry

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

the repo is showing incorrect files kindly upload again

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

Yes, unfortunately I haven't had time to update it yet I'm sorry

@thedyslexicwebdev1654 Год назад

1:21

@arslan99 Год назад

True true 🫡

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

your repo is deleted can u upload it again?

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

just fixed it ty for letting me know

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

@@arslan99 btw i type the code manually thnks for this video you saved my time. do have video on how to change react page to power point format?

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

@@ranafaraz4068 no I sadly don't fact that video

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

now it seems its not the finished code present in repo !!

@user-ug9lz7cm3h Год назад

bro your repo is empty

@arslan99 Год назад

Damn sorry I must've pushed an empty repo sorry

@happinin Год назад

this helps a lot. but if the div you are capturing contains one that is scrollable, how do you get the entire contents of that div instead of what is just on screen?

@arslan99 Год назад

Well it really depends on the size I give I have never thought about that issue before but I'm assuming that it should automatically create another PDF page if it's too big

@happinin Год назад

@@arslan99 it doesnt. if its a fixed height thats a scrollable div, it wont show the contents of the whole div. just what you can see on the screen. is there a way to solve this? i heard it can be done via puppeteer but i cant import a nodejs library...

@happinin Год назад

@@arslan99 if you could re-create this using puppeteer in react without node.js, that would be legendary

@arslan99 Год назад

@@happinin lemme see what I can do