React to PDF Printing | React Tutorial

We will learn how to convert anything inside React component into PDF file and be able to print. Let's find out, guys!
SUBSCRIBE: bit.ly/Subscrib... & turn on notifications to find out when I upload new videos.
Hong Ly Tech
honglytech.com
Websites used in this video
www.npmjs.com/...
COVID-19 Live Now URL
GitHub Repo
github.com/lyh...
GitHub Pages URL: lyhd.github.io...
Netlify URL: vigilant-noeth...
Website: www.hongly-port...
Medium: / lyhong.rupp
Facebook: / honglytechfb
Facebook Page: / honglytech
Instagram: / hongly_tech
Twitter: / honglytech
Facebook Page (Think): / kitthink
#react #pdf #printing

[@tbtester3378]

What if we already have an app written with functional components? The above doesn't work.

[@2Dimples4U]

Exactly what I needed. Is there a way to have that little print icon that usually wraps around a window of a component?

[@Deepak-ye8vt]

Nice explanation with less time.Great Job sir.

[@StephenArpad]

How can i reduce the whole content inside the printing page? I tried overloading the pageStyle prop, but for some unkown reason to me, it's not doing anything. Any ideas? Thanks

[@kdgyimah]

Thanks for the tutorial, I got the same result with {window.print()}. Is there a way to save the PDF file into the state? I want to submit the file to the backend on generation

[@HARSH11ify]

Thanks buddy, you're a saviour!!

[@AjayKumar-jx5qb]

Just wondering if there is a way to add page number and table of contents for larger content. Thank.

[@chiragprajapati6312]

hey nice, but what if I want to add some header to print but I don't want to show it on component

[@yuribaldini1126]

Thanks for sharing!! It was really helpfull.

[@VishalPatel-hl8ir]

I want to create an Invoice on button click & export same invoice in pdf. Can you please help me to do the same ?

[@Fattpiu]

What happens if my printer is out of ink or out of paper? Is there a way to capture that?

[@gangaprasadk]

Thanks for the tutorial. Its great. Can we make ComponentToPrint as a functional component instead of class component. Also, can we print directly without the Print Dialog.

[@utkarshsinghchauhan7113]

did you get the solution for printing directly without the print dialog box?

[@gangaprasadk]

@@utkarshsinghchauhan7113 no

[@RyuAdventures]

Nice tutorial I have a question, Does it works inside a React+Electron APP ?

[@SHATHISHB]

how to add page numbers?

[@travel_worldwide_365]

Nice explanations .Great !

[@MrTouqeerhameed]

Thank you for the wonderful tutorial

[@abubakarwaqas9807]

Pdf is creating but when I tried to select text than it was not select ? please can you tell me what is the reason. Thanks advance

[@kacperkepinski4990]

can i add something as a footer for every page?

[@ahmaat19]

Can I use with hooks because it's giving me an error that needs only class-based components?

[@BenniK88]

Did you find an answer?

[@ahmaat19]

@@BenniK88 yes.

[@BenniK88]

@@ahmaat19 Can you help me. As I got the same issue. Can you post your solution? Thanks in advance

[@ahmaat19]

@@BenniK88 you can find how I implemented here github.com/ahmaat19/restaurant-system

[@redyk4073]

Thank you guy it's was helpful

[@mrskrish9584]

Any possibility to specify where to page break

[@khandoor7228]

Nice tool Hong thanks for showing this.

[@honglytech]

Thanks KhanDoor

[@sayantansaha2703]

if i need to change that printing page style,how to set that ? for an example in my webpage there is an auto generated qrcode, and i want to print that only & also i want that QR-image printed in the middle of that a4.please help!!

[@istvanerdos7682]

Hey! Thanks for sharing this! Do you have any idea about how I could print a table with scrollable content? I've tried to set it to landscape mode, but it does not work for me.

[@akinjidesleek]

If its a table you should probably try downloading in csv format with react-csv

[@istvanerdos7682]

@@akinjidesleek Thank you! Finally, we decided to create a custom print component for it in which the cells are breaking down into the next line. I have used flexbox divs to build the "breakable" table component.

[@uzmamustafa3293]

Can you show me the custom print component output, i need to print a scrollable content table too so.

[@priyan6380]

@@uzmamustafa3293 same I'm also having problem while printing scrollable content

[@KamalMaulanaAdha]

so helpful thanks

[@sivaprasadreddy5038]

hi i am facing isse with when we print checked checkbox and selected dropdown value not printed can u pls help me on that

[@asyncasync]

A complete and utter waste of time and absolutely useless. You cannot select the text after generating the PDF. This is like an April fools joke. What exactly is the point of this if you cannot copy the text?

[@hemanthkumar9137]

thanks for this tutorial :)

[@Jay-bh9ke]

Does it support print all tab content instead of active tab

[@saikalyan8073]

Can we do this get a power point presentation

[@johanrivas8015]

the component to print must be a class component ?

[@travelfiend]

Yep, seems that way. You get a weird error when trying with function components

[@johanrivas8015]

@@travelfiend thanks for replying

[@markbarlescu1853]

@@travelfiend Is this still an issue? I'm going to be using this soon. So the component to print MUST be a class component still?

[@webamplifiereducation1768]

is this can be used for pos?

[@fattchong1619]

how do you use the onPrintError function?

[@allaboutvideos4788]

Thank, Will this work on android app?

[@honglytech]

This is only running in the browsers. Not mobile apps.

[@ngneerin]

Best

[@AjayTheGamer07]

In browser . we can give ctrl + P in any website it will show print as pdf so why we are doing code like this.can you explain?

[@honglytech]

You can try window.print()

[@AjayTheGamer07]

@@honglytech Thank you

[@arghyapaul8760]

Suppose if we want to ignore a table coloum before coverting it to pdf and when it will be converted to pdf then in the pdf file the last or first coloum will be removed. how will I do that

[@austintochukwuasoluka1502]

Media query

[@shivampawar8421]

Thanks for sharing

[@abhishekshah2964]

How to print with one row at a time with this ?

[@rajeshkolluri448]

If possible explain the code

[@bunnyngim2758]

Hi Any vdo talk about electronJS and Vue with Printer? Thank

[@honglytech]

Not yet bro. But I added the two items to the list

[@basitbasit2547]

not good in production mode :'(

[@manujamadushan9471]

😍

[@its_just_me_]

At the time I am watching this, the video has 11k views, 111 likes and 11 dislikes.. 😄

[@leelalekkala5587]

sir in my case instead of save option it is showing print option. after clicking on print option it disappear. how will I solve that?

[@blood4bones366]

Thank you for this