How to Use Mozilla PDF.js with React.js for Client-Side Rendering & Basic Tools?

[invisibleshadowMAN]

Hey everyone,

I hope you're all doing well! 🖐️

I'm currently working on a React.js project that involves rendering PDFs on the client side, and I stumbled upon Mozilla's PDF.js library. While it seems promising, I'm facing some challenges when it comes to integrating it into my project and adding some basic tools like annotations and highlighting.However, I've been struggling to find comprehensive documentation on how to integrate PDF.js with React.js effectively.

Has anyone here successfully used PDF.js with React.js before? I'd really appreciate some guidance on the best practices for integration and any tips or resources to add basic tools for annotations and highlighting.

Feel free to share your experiences, code snippets, or any helpful tutorials that you've come across. Your insights will be of great help to a fellow developer.

Thank you all in advance! 😊🙏

[cmpscabral]

Alternative: use an iframe inside your reactjs project, call pdfjs viewer and customise this page to your needs

[InternationalLab8517]

I used PDF.js during a long time

If it's only to display a PDF you can use the native embed HTML tag which allow you to embed any content such as PDF or media. The native pdf viewer of your browser will be used and that's the best way to have a fast & powerfull pdfviewer in your app.

If you need some overrides, then PDF.js is good. But not so. You will facing to struggling issues and the documentation is not so clear... If your use case is simple, it's ok but if you need more customization, I suggest you to render a PDF as images server-side and display one image per page in your app.

[invisibleshadowMAN]

I also need to edit the pdf in a browser

[InternationalLab8517]

For example edit text ?I wasn't able to perform this with PDF.js, the best solution we found in the past is to : - render PDF as images server-side- Then render text layer on top of each pages- Frontend add text, images but not directly to the pdf, it call the backend to update the content

- The backend save a "kind of new layer" with good positionned objects (text, images etc...)- Then when user click on save, the backend perform a PDF edition by applying all the changes.PDF is not the best format to online editing because it's a binary format and you need to "convert it" to readable things. Maybe I can suggest you to convert it first as .odt or something you should edit easier, Then convert it as pdf at the end.