ฝัง
- เผยแพร่เมื่อ 14 ต.ค. 2024
- Yo, In this video, we will dive into the world of React-PDF and how to style it with custom fonts and dynamic page styles. This is an amazing way to create dynamic PDFs in your React applications, providing a rich user experience.
Our journey will take us from the basics of React-PDF to applying custom fonts and, finally, to creating dynamically styled pages.
🔗 Useful Links:
Code Repository: github.com/ars...
Previous Video: • ReactPDF Basic Setup
React-PDF Documentation: react-pdf.org/
If you find this video helpful, don't forget to hit that like button and subscribe for more content like this. Also, feel free to drop your questions or suggestions in the comments section below.
Happy Coding! 🚀
LINKS: linktr.ee/arsl...
Please don't forget Like, Comment and Subscribe if you're new!
Thank you guys for these videos they are value
im rendering a booking receipt that sometime is really long how to break to new pages automatically?
@@mangkoeboemie hmmm you could try asynchronous await
Hey @Arslan I just started watching your videos and they are really good. I was wondering if you knew how to create an endpoint that receives some data from the client and generates a react PDF in memory, which can then be sent as an attachment to an email using nodemailer. I am having troubling finding out how to generate a PDF in memory and then send the attachment, nodemailer seems to need a path to a file when sending attachments. How would you go about this? Anything will help, and thanks for these videos, been really helpful.
This should help now it's not exactly what you need but it's close
th-cam.com/video/-_hRWBpaJZk/w-d-xo.htmlsi=z00CZqti-kQuc9Tc
getting this error ./node_modules/@react-pdf/font/lib/index.browser.es.js
Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit').
it could be misspelled im not too sure sorry
Can you please help to set fixed header and footer for each page, please.
Nicely shown and explained. Good stuff as always - I dropped a like 👍
I know this may be off topic but have you ever used tRPC? I used it once but didn't get too deep into and the same goes for tailwindcss. I'd be interested in seeing you work your magic on one of those topics. But if you already got stuff in the pipeline then no worries. I always learn something new from you bro. Thanks 😎
Hey bro, thanks for the support 😄. I've never heard of tRPC or used it before but after looking it up a bit, it looks pretty interesting 🤔. I think it would be a pretty good tutorial to make I'll add it to the list. And for tailwindcss I've always wanted to use it and to make tutorials on it thanks for reminding of them I'm gonna add them to the list to teach after electron is over. I really appreciate all the ideas 💡
@@arslan99 awesome, yes that electron tutorial is fire and I have been learning a ton from it. Glad to hear you got more tutorial videos on it coming. And no prob, ya I been thinking about using tRPC for future projects but I don't have too much knowledge about it. tailwindcss seems pretty good for putting UIs together quickly and would be interested in seeing that as well. Looking forward to you dropping those tutorials in the future bro. Thanks
Alright Lemme look into it because if those two things will help you out I'd be glad to teach it 😁
You are a Legend Arslan, thank you so much! Problem solved! 🥳
I'm glad you got it 😄
I tried this method but it is throwing module not found error
How are you supposed to render on client side. I am using PDFViewer but it loads the window is way too small.
How can you rerender the PDFViewer whenever there are changes?
Getting this error TypeError: fontkit__WEBPACK_IMPORTED_MODULE_6__.create is not a function
I want to show data in table but unable to do it can u suggest something how can i achive this
You can use a regular html table to do that and use react pdf to display it
Tried it but didn't work
@@ashwinsolanki6549 I'd recommend asking chat gpt it's a quick and easy way just provide it the video and what you want it to do 😁
Does it mean that the style that you apply to your components (display, colors, positions, etc.) will be the same on the PDF style ? Making it possible to "design" the PDF
Yes it should I'd recommend double checking the docs but the basic customization I did in the tutorial should help you get started 😄
can i use multiple Fonts (and how) ?
I'm sure there has to be a way to do that I'm not sure off the top of my head sorry
@@arslan99
import RobotoBold from "./fonts/Roboto-Bold.ttf";
import RobotoItalic from "./fonts/Roboto-Italic.ttf";
import RobotoBoldItalic from "./fonts/Roboto-BoldItalic.ttf";
Font.register({
family: "Roboto",
fonts: [
{
src: RobotoBold,
fontWeight: "bold",
},
{
src: RobotoItalic,
fontWeight: "normal",
fontStyle: "italic",
},
{
src: RobotoBoldItalic,
fontWeight: "bold",
fontStyle: "italic",
},
],
format: "truetype",
}); this works,
@@DavidPopa-x3m oh nice I'm glad you got it, so you just put them all into the array.
Emotional video 😭🙏
Thank you kind sir 🥺