Nextjs and React PDF Tutorial: WATCH THIS BEFORE STARTING YOUR PDF
ฝัง
- เผยแพร่เมื่อ 2 ก.ย. 2022
- React-PDF tutorial, everything I had to deal with from start to finish and all the agonizing solutions I had to find along the way.
Github link:
github.com/bbois1999/react-pdf
How do I import font into React PDF?
How do I import images into React PDF?
Why isn't react pdf showing up on my browser?
PDFViewer and PDFDownloadLink not working in browser?
Error: PDFDownloadLink is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build.
TypeError: dispatcher.useSyncExternalStore is not a function
PDFDownloadLink TypeError: Cannot read properties of null (reading 'props')
[bug] × TypeError: Cannot read property 'props' of null
PDFDownloadLink work only work when render but hit error when reload page
dispatcher.useSyncExternalStore error PDFDownloadLink
dispatcher.useSyncExternalStore error
Warning: VIEW / is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements
DOCUMENT / is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. [bug help wanted]
Error: Font family not registered: Inter. Please register it calling Font.register() method.
“I don’t know what that means, I just know that this works” - The stranger that saved my job.
"This knowledge has been passed down for generations" vibe
I love the enthusiasm and how you're so fired up to share your knowledge. You earned a sub :)
I don't even need to use this packaging, but I stayed to watch because you are awesome! Can feel the 'pain' you went through, thanks for sharing.
Great tutorial!
A useful alternative I found was to 'screenshot' whatever component I wanted rendered and render it as an image with react-pdf, with this I could add everything I wanted.
Hello there. Thank you for this wonderful video. i have struggled over this bug for a month.Thank You and more videos
Thank you, if you want to display the pdf with a larger height and width, just add a class to pdfViewer and set the desired width and height in the class. For small screen use media query to transition
bro you literally saved my life - i downloaded the video just in case you ever take it down i have some refference
That was the best ending. Yaaah. Anyway, thanks for this. Can’t wait to try it out.
For Next.js 14 only write "use client" on top of your page.js file, before the import lines, below these lines, write const styles and const MyDocument functions ,inside page, write the useState and useEffect and inside the return the pdfViewer, to this tag add style={{ 'width': '100%', 'height': '100v' }} so that the PDFViewer is the full size on the page, with this you eliminate the need to place dynamic and create two different components, it works for me :D
Thanx a lot
i did this but I am getting error 404: page not found can you help please?
Thanks for making this! I still have to rework this a bit for my use case at work, but thanks for helping me get started! I tried using react-to-pdf but I couldn't get it to work; it makes use of a componentRef and it was just complicating things for me with what I'm doing.
That was really helpful, thank you.
You are a life-saver ! Thanks a lot 👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾
Thank you so much. Wow this is a big help.
dude legit kekw's in a dev tutorial at 6:23
Thanks for the vid defo let me know of a few pitfalls I didn't realise I was already in
Thank you, it was very helpful
I love how you explain everything haha
can you import pdf like you've done with an Image?
FYI: you'll need to run npm i next for your project to find dynamic, not npm i @next-tools/dynamic. As for the tiny PDF Viewer, try adding in some styles like so in your PDFView component (the one below where you have the as the root component):
Hello Bro, Amazing tutorial
Dude you dont even know how large problem it was for me load image to my pdf. it's always said it cant get to it. Then I remembered that I week ago I watched this video and you said to use folder ...publick/assets. you saved me.
I had a lot of issues trying to get this work yesterday!
Hey, can you continue explainin g the styling , taking values from an d api and stuff like that?, this is the best video on the creation of PDF in NEXTjs
If you guys wondering why your custom font doesn’t work. Just try on style on component, not component.
hugeee dose of knowledge
Thank you so much. You save me
Hi. Do you know how to turn a PDF into a Blob?
i cant take anymore.....
Great video, was incredibly helpful. The fix to the size I found is adjusting the width and height in a global stylesheet on the Iframes.
Hi thanks for help can you help me with challenge I would really appreciate I want to create content table page like we have in books, problem is I don't know how to assign page number to in content table because I don't know how many pages chapter 1 will take and chapter 2 will start at what
Awesome help +++++++++++++++++ Thank You 😀
thanks! you save me
Awesome! Do you know how to open a PDF in a new tab?
I am getting this error Any idea to fix this
./node_modules/@react-pdf/font/lib/index.browser.es.js
Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit').
thank you
Thanks alot man, is it possible to create PDFs with dynamic content, like a receipt or something?
this is what i need to know
may your days be long and filled with the lustfully desires of all neards and developers all over the world. you just saved my ass.
Thanks for letting me out the gutter, budd
you can style the PDFViewer component with 100% width or anything you want.
Ssr false is just removing server side rendering. You are making it a client component. In the new nextjs you don't need to do this. Just "use client"
I finally got it to work but it is a hideous mess. It shows the original page as well as a raw text version and then the nav buttons are displayed on a third page. Going to take a look at your code.
How to create table?
hi, when run "npm run build", I get this error "PDFViewer is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build " any solution please.
Watch the hole video. The trick is to generate a second view to display the document with disabled SSR
@@MarkSchewe I did that and still get the error while building my next.js app
in latest next js do this work
Error: PDFDownloadLink is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build.
getting this error in production but works fine on local
i did ll the steps same as shown in video
i am using next js 13
Gracias por el video.
Para la comunidad latina
i got this err : Error: PDFViewer is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
I'm sorry it's been so long since I've done anything with this. If I were you I'd ask chatGPT lol, it legit might know exactly how to fix this
Please, new Tutorial with Next - 14 !!
Amazing bro! Did you have the error:
PDFViewer is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build.
When building the application? I`m having problems with that
Thanks for the help!
Hi. Do you know how to turn a PDF into a Blob?
i cant take anymore.....
@@nevajnosovsem2369 got no idea how to do it. If you know how to i will be really thankful.
@@nevajnosovsem2369 I found the solution! On your next.config file you should add:
const nextConfig = {
/* all your config */
swcMinify: false,
}
Is there a way to make it bigger? Instead of zooming in the pdf? It's pretty hard
I use tailwind,
global.css set an iFrame css declaration and give the height and width you want, the Document tag fills it up.
can you please share the git link of the above tutorial?
github.com/bbois1999/react-pdf
@@brendanbois5365 thank you🙂
Almost shot myself, this was driving me crazy lmao
make more vids bro
I had an issue with fs not defined or some issues ,this code worked for me
module.exports = {
webpack: (config, { isServer }) => {
if (!isServer) {
// Exclude 'fs' module from client-side bundle
config.resolve.fallback = {
...config.resolve.fallback,
fs: false,
};
}
return config;
},
};
After git clone, if you see in the left corner white square try to change the font to some default like Font.register({ family: "Helvetica", src: "/path/to/helvetica.ttf" });