How to display PDF files in React JS using react-pdf



This post will explain you how to show pdf files in React JS using a package called react pdf

Introduction

react pdf is an open source package created by developers to help the community. The primary purpose of this package is to show pdf files.

  1. it is very easy to setup & use.
  2. it will display the pdf files as if they are image files.

Prerequisites

In order to download this package, you can go to this website and follow the simple instructions give there.

To install run this.

npm i react pdf

Here's an example of basic usage to display all pages from pdf 

<Document

                file="./Mastering ASP.NET Web API.pdf"

                onLoadSuccess={this.onDocumentLoad}

            >

             {

                Array.from(

                  new Array(numPages),

                  (el, index) => (

                    <Page

                      key={`page_${index + 1}`}

                      pageNumber={index + 1}

                    />

                  ),

                )

              }

            </Document>

Note: If you are following official documentation you may write the code like below ,but you may get only single page by using below code. 

      <Document

          file="./Mastering ASP.NET Web API.pdf"

          onLoadSuccess={this.onDocumentLoad}

        >

          <Page pageNumber={pageNumber} />

        </Document>    

Labels: display pdf in react js, display all pages in react pdf
Subscribe

Receive Quality Tutorials Straight in your Inbox by submitting your Email below:

Delivered by FeedBurner

Protected by Copyscape Duplicate Content Checker