วีดีโอ

Its gonna be almost 2 years since this video was uploaded but this solution still holds true and most importantly, works! Thanks a lot for this Brendan! To those reading, if you TH-cam search 'React PDF' and a video shows up by the channel 'Arsalan' titled 'React PDF Basic setup'. DO NOT follow that for setting things up on NextJS. You're gonna error out. Just follow this video and be on your way to creating your PDF.. Thanks again Brendan! A fellow dev saves the day yet again! ✌🏻🫡

bro you literally saved my life - i downloaded the video just in case you ever take it down i have some refference

I am using SPFX(SharePoint Framework) with React And I have used react-pdf/renderer and I have done these things and also exactly that I have seen in documentations but I am getting an error in the console stating that bidi is not a function at textkit.js. Help me 🥹

make more vids bro

hugeee dose of knowledge

I really appreciate the video. I got mine working by importing pdfjs from react-pdf and setting pdfjs.GlobalWorkerOptions.workerSrc to legacy to get rid of the unexpected token error.Then created a types.d.ts file to set .pdf type to :any and added it to the tsconfig so that the application could find the module for import. I came to this video as a quick way to understand the rest of the API imports and how they work. I gotta say, take a breather before hitting record next time. I feel your pain, I was on this for 2 days. But it will reach a wider audience if you take some time before making the video to cool off and rehash the required steps in your head a few times

That was really helpful, thank you.

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; }, };

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"

Please, new Tutorial with Next - 14 !!

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

You are a life-saver ! Thanks a lot 👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾

in latest next js do this work

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.

I had a lot of issues trying to get this work yesterday!

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

Thank you so much. Wow this is a big help.

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.

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 <Document> as the root component): <PDFViewer style={{width:"100%", height:"100vh"}}>

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.

Awesome! Do you know how to open a PDF in a new tab?

thank you

How to create table?

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" });

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!

Thank you so much. You save me <3

I love how you explain everything haha can you import pdf like you've done with an Image?

chutiya video

Hello there. Thank you for this wonderful video. i have struggled over this bug for a month.Thank You and more videos

Almost shot myself, this was driving me crazy lmao

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.

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 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, 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

“I don’t know what that means, I just know that this works” - The stranger that saved my job.

If you guys wondering why your custom font doesn’t work. Just try on style on <View> component, not <Text> component.

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

you can style the PDFViewer component with 100% width or anything you want.

Gracias por el video. Para la comunidad latina

Is there a way to make it bigger? Instead of zooming in the pdf? It's pretty hard

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.

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.

Thank you, it was very helpful

Thanks for letting me out the gutter, budd

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

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 alot man, is it possible to create PDFs with dynamic content, like a receipt or something?

I love the enthusiasm and how you're so fired up to share your knowledge. You earned a sub :)

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.

Awesome help +++++++++++++++++ Thank You 😀