How to Build a React.js PDF Viewer with PSPDFKit

In this video tutorial, you'll learn how to build a React.js PDF Viewer using PSPDFKit's React Library. We'll cover:
- Creating a New React Project
- Adding PSPDFKit to Your Project
- Displaying a PDF
Companion blog post: pspdfkit.com/blog/2021/how-to...
How to Build a JavaScript PDF Viewer: pspdfkit.com/blog/2021/how-to...
React.js PDF Viewer Library: pspdfkit.com/guides/web/viewe...
PSPDFKit Free Trial: pspdfkit.com/try/?...
Follow Clavin Fernandes
Linkedin ➡️ / clavin-fernandes-38a30862
Twitter ➡️ / clavinfernandes
Blog ➡️ clavinfernandes.wordpress.com/
SUBSCRIBE TO OUR TH-cam CHANNEL:
VISIT OUR BLOG: pspdfkit.com/blog/?...
LIKE US ON FACEBOOK: / pspdfkit
FOLLOW US ON TWITTER: / pspdfkit

[@Shuubhham]

Highlight text ?? On docx and pdf file

[@ahsanumair9703]

Can you tell me how to read pdf from a download url of pdf file? Or how to read pdf if pdf is not in public folder of react?

[@FahadKhan-rp3rz]

Can I use just signature modal only.? I just want an icon when user clicks on it and it will open signature modal. Can it is possible

[@elipayano8186]

Absolutely! Here's an example: codesandbox.io/s/cranky-andras-57gx4s?file=/index.js

[@nurdoganakdag]

hello, the code I wrote in react works in development environment and I can view pdf. but when I build to real environment I get the following error :
pspdfkit.js:90146 Uncaught (in promise) TypeError: Super expression must either be null or a function
at pspdfkit.js:90146:1
....
....
Uncaught (in promise) TypeError: r.load is not a function
at PdfViewerComponent.js:12:29
Thank you

[@negativepunk9638]

Hi, I am wondering why do I always get "An error occurred while initializing PSPDFKit for Web." error even after following your guide and the documentation? Is there something I should know about? thank you

[@elipayano8186]

Please ensure you're loading a PDF from your public folder. If this doesn't work, please make sure you have all the necessary dependencies and follow every step as indicated in our Getting-Started Guide here: pspdfkit.com/getting-started/web/?frontend=react&download=npm&integration=module&project=new-project

[@navakanthreddy6424]

Iam getting the cors error for the pdf url which i placed in the document to open, could you please help with this

[@elipayano8186]

Does the PDF URL have the same domain origin as your server ? If not, the browser (client) won't allow you fetching the PDF document. I'd recommend building a backend with node.js to request the PDF file, convert it to a buffer or blob, and then pass it to your front-end to load it as the document in PSPDFKit. Here's a guide that shows how to convert a URL to an Array Buffer: pspdfkit.com/guides/web/open-a-document/from-remote-url/
Alternatively, you could also use a proxy to work around the CORS error. This independent TH-cam tutorial explains in short why CORS issue happens and options to fix them: th-cam.com/video/gPzMRoPDrFk/w-d-xo.html&ab_channel=SoftAuthor
Please feel free to reach out to [e-mail] if you have any further questions or concerns, and we'd happily help.

[@thomasg4967]

Humm.. will you ignore the faction that there is an ugly red sentence "PSPDFKIT for Web Evaluation" at the top of every page? If I can't get rid of that, I'm just going to look somewhere else...

[@thomasg4967]

for free obviously

[@clavinfernandes8566]

Hi there, Thank you for your comment... Red Evaluation will go away once you apply the license. Please contact our sales team pspdfkit.com/sales/form/

[@muhammadsigit59]

is it free to use only view pdf?

[@elipayano8186]

Trial Mode is free but you'll always see a red watermak. It's removed once you purchase a license. If you want it for personal use, I'd recommend downloading our Apps or using our online demos.
Apps: pdfviewer.io/
Demos: pspdfkit.com/demo/hello

[@Entdasein]

Will there app for winOS released? If this would never be the plan, could I get the trial version for private use? The UI of PSPDFKit is so beautiful and clean.