React to PDF Printing | React Tutorial
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- 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
Exactly what I needed. Is there a way to have that little print icon that usually wraps around a window of a component?
so helpful
thanks
What if we already have an app written with functional components? The above doesn't work.
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
Nice explanation with less time.Great Job sir.
Thanks for sharing!! It was really helpfull.
Thanks buddy, you're a saviour!!
Just wondering if there is a way to add page number and table of contents for larger content. Thank.
hey nice, but what if I want to add some header to print but I don't want to show it on component
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
Thank you for the wonderful tutorial
I want to create an Invoice on button click & export same invoice in pdf. Can you please help me to do the same ?
Thank you guy it's was helpful
Nice explanations .Great !
Thanks for sharing
thanks for this tutorial :)
Nice tool Hong thanks for showing this.
Thanks KhanDoor
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.
did you get the solution for printing directly without the print dialog box?
@@utkarshsinghchauhan7113 no
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!!
Best
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.
If its a table you should probably try downloading in csv format with react-csv
@@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.
Can you show me the custom print component output, i need to print a scrollable content table too so.
@@uzmamustafa3293 same I'm also having problem while printing scrollable content
Can I use with hooks because it's giving me an error that needs only class-based components?
Did you find an answer?
@@BenniK88 yes.
@@ahmaat19 Can you help me. As I got the same issue. Can you post your solution? Thanks in advance
@@BenniK88 you can find how I implemented here github.com/ahmaat19/restaurant-system
Any possibility to specify where to page break
What happens if my printer is out of ink or out of paper?
Is there a way to capture that?
how to add page numbers?
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
hi i am facing isse with when we print checked checkbox and selected dropdown value not printed can u pls help me on that
can i add something as a footer for every page?
Does it support print all tab content instead of active tab
Nice tutorial I have a question, Does it works inside a React+Electron APP ?
how do you use the onPrintError function?
Can we do this get a power point presentation
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
Media query
Hi Any vdo talk about electronJS and Vue with Printer? Thank
Not yet bro. But I added the two items to the list
is this can be used for pos?
How to print with one row at a time with this ?
the component to print must be a class component ?
Yep, seems that way. You get a weird error when trying with function components
@@travelfiend thanks for replying
@@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?
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?
You can try window.print()
@@honglytech Thank you
Thank, Will this work on android app?
This is only running in the browsers. Not mobile apps.
If possible explain the code
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?
😍
not good in production mode :'(
At the time I am watching this, the video has 11k views, 111 likes and 11 dislikes..
😄
Thank you for this
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?