How to display PDF Files using React PDF Viewer in 2022

So Hi there friends, Welcome to another tutorial of Reactjs. In this tutorial, I will show you how you can easily upload and display PDF files in your React Apps. Previously I had created two tutorials on the same topic but as time passes technology updates and tutorials becomes outdated so, I had to create a new one to help the troubled ones.

Which packages to install?

1. Install pdfjs library

2. Install the core package

3- Default Layout Plugin (Optional)

Install this package if you want to use the layout options

Here is the GitHub Repo link: (Follow me on GitHub)

Music Used in the video:
(I don't own any music. All the credit of music goes to their respective owner)

1- Cartoon - On & On (feat. Daniel Levi) [NCS Release]

2- Fragments by AERØHEAD
Creative Commons Attribution-ShareAlike 3.0 Unported

3- Drift (provided by Fimora)

[awad]

hey. thank you so much on your work. it worked for me. but do note in the future, some people might have the error:
The API version "x.x.xxxx" does not match the Worker version "2.9.359".

to fix this, just npm install the version "2.9.359"

[oigirilles-warzoneclips]

Can you help me i am getting this warnings: "Invalid pdf structure", "Warning: getHexString - ignoring invalid character: 33", "Warning: Indexing all PDF objects". the pdf i tested are all okay i dont know whats the error

[imamul.hossain]

In google chrome, print preview window is not found, instead it shows "Preparing document..." modal. What can I do?

[slingshot]

And isn't there any other library because this library has around thousands of version and why it uses an API, isn't there any native or local library which won't use any of API and also provide functionalities like go to a specific page and can do highlighting. react-pdf and pdfjs-dist has many issues

[yopuesquienmas]

And if I want to search for a pdf that is inside my react project, how could I do it?

[yassinenifa]

is there a way to enhance the performance of react-pdf-viewer while working with large pdf ?

[AbhiPatel-ejtj]

I want to open attachment in new tab with its original format in office 365. How can I do in react project?

[hitesh]

Thanks for another amazing tutorial. On downloading file from pdf viewer, the file name is too long. Did anyone else face issue? Any idea how to manage file name while downloading from pdf viewer?

[Harry-vsxj]

is therer a way to search for pdfs saved in a directory in the project front end? instead of local PCs files.

[rahulshewale]

I'm getting Aw snap error on Chrome.. memory exceeded...due to pdf size and contains image's

[MayankYadav-]

I want to display pdf using urls
So where should I upload pdf and get url which will work on reactpdfviewer
Google drive links are not working here

[vairamuthuvairam]

sir, when we click print icon (pdf preview) not show . pls help how to solve this issue

[miguelbolanos]

like for the good info and for on and on song :-)

[ilhamrifai]

how to display pdf only, not use upload
?

[pancakegenial]

hi, is there a trial version to play with it before buying ?

Or do we have to pay for it to get all the features without testing ?

[guidofrassettigiulioni]

Hi !, and if i wanto to upload multiple pdf ?

[naishadhchawra]

do i have to purchase to use in prodiction application??

[boneclinkz]

after uploading the pdf can u send it to an gmail account?

[spookyskellyskeleton]

the plugin is not working for some reason