Using a pdf viewer to view pdf's in ReactJS web app from Azure Blob storage

January 10, 2024, Abdush Miah

Introduction

I had developed an application which required getting files from an azure blob storage to then view the file in the front end web app. Although this article does not cover the setup and configuration I did in the backend, these are the steps I took for the pdf to be viewed in the ReactJS app.

Below are the steps I took to be able to view pdf's in my reactjs web app.

Step 1

Install the following package

npm install pdfjs-dist@3.4.120
npm install @react-pdf-viewer/core@3.12.0

Step 2

In the file that you have the 'root' element e.g you app or index.tsx file add the following:

import { Worker } from '@react-pdf-viewer/core';

<Worker workerUrl="https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js">
    <<!-- The viewer component will be put here -->
        e.g <App />
    ...>
</Worker>

Step 3

Next in the component you will be opening your pdf file add the following:

// Import the main component
import { Viewer } from '@react-pdf-viewer/core';

// Import the styles
import '@react-pdf-viewer/core/lib/styles/index.css';

// Your render function the url may also be a link e.g a link to blob storage or aws s3 bucket
<Viewer fileUrl="/path/to/document.pdf" />;

Step 4

You'll only need this step if you are obtaining the pdf file from an azure blob storage account.

Your CORS configuration should be as follows:

You'll navigate to your azure storage resource via https://portal.azure.com and then go 'Resource sharing (CORS)' under 'Settings'

References