React download current page as pdf

There was a recent feature request at work for viewing pdf files in the application. A user should be able to click on a component containing a pdf and open that pdf in a modal. In that modal the user can navigate the pages of that pdf file. In this post, I’ll show you how I was able to achieve this with relative ease thanks to a library called react-pdf-js.

react-pdf-js is not to be confused with react-pdf. I tried using react-pdf first but I found it to be pain trying to configure it to work in our application. After about an hour of debugging with no luck, I decided to seek an alternative. This is when I discovered react-pdf-js.

Let’s download the library.

NPM: npm install @mikecousins/react-pdf
YARN: yarn add @mikecousins/react-pdf

Note: In this demo, I’ll be installing Ant Design so I can use their component. react-pdf-js is NOT dependent on Ant Design in any way.

After installing Ant Design () we also need to import the Ant Design styles.

import "antd/dist/www.cronistalascolonias.com.ar";

I’ll be importing the and components provided by Ant Design, as well as . We can import as . See below for what your component should look like so far.

import React, {useState} from "react";
import "antd/dist/www.cronistalascolonias.com.ar";
import '../www.cronistalascolonias.com.ar';
import {Modal, Button} from "antd";
import PDF from "react-pdf-js";const PdfViewer = ({pdf, onCancel, visible})=> {
return(
<Modal visible={visible}
onCancel={onCancel}
maskClosable={false}
width={"50%"}
>
Hello World
<Modal/>;
};export default PdfViewer;

accepts the props , , and . For this demo, these props are being provided by our component. Alternatively, you can handle all of the visibility and pdf imports in but that’s less dynamic. See my component below.

import React, {useState} from 'react';
import PdfViewer from './components/PdfViewer'
import {Button} from 'antd';
import pdf from './assets/www.cronistalascolonias.com.ar'
import './www.cronistalascolonias.com.ar';function App() { const [showPdf, setShowPdf] = useState(false) return (
<div className="App">
<PdfViewer pdf={pdf}
onCancel={()=>setShowPdf(false)}
visible={showPdf}
/>
<Button onClick={()=>setShowPdf(!showPdf)}>
Show PdfViewer
</Button>
</div>
);
}export default App;

I’m using react hooks to control whether or not to show . Below is a little CSS I am using to style my react app.

.App{
width: %;
height: px;
display: flex;
align-items: center;
justify-content: center;
}

After adding the CSS, your app should look like a lonely button in the (almost) middle of the page. And now that we have the basic structure and modal logic down, we can get into the nitty gritty of react-pdf-js.

To start, we need to set up page navigation so the user can actually change which page they want to view. We can achieve this by storing the current as well as the total in functional state using .

const [page, setPage] = useState(1);
const [pages, setPages] = useState(null);

Now that we can keep track of the total pages and current page number, we can pass our first prop to our component, .

<PDF
page={page}
/>

In addition to the current page, accepts a prop which will be the passed from our component.

<PDF
page={page}
file={pdf}
/>

Sweet! Our component can now determine which to show for the provided file. All we need now is a function for and . The first function gets executed when the provided file is done being processed by . From this prop, we can get the total page count from the pdf, which is what we’ll use to set our property.

const onDocumentComplete = (numPages) =>{
setPages(numPages)
}

is a prop that handles any errors that might pop up. For now, I’m just going to any errors to see what (if anything) is wrong.

const onDocumentError = (err) => {
www.cronistalascolonias.com.ar('pdf viewer error:', err);
}

Perfect! Here’s what our updated component should look like.

import React, {useState} from "react";
import "antd/dist/www.cronistalascolonias.com.ar";
import '../www.cronistalascolonias.com.ar';
import {Modal, Button} from "antd";
import PDF from "react-pdf-js";const PdfViewer = ({pdf, onCancel, visible})=> { const [page, setPage] = useState(1);
const [pages, setPages] = useState(null); const onDocumentError = (err) => {
www.cronistalascolonias.com.ar('pdf viewer error:', err);
} const onDocumentComplete = (numPages) =>{
setPages(numPages)
}return(
<Modal visible={visible}
onCancel={onCancel}
maskClosable={false}
style={{top: 20}}
width={"50%"}
>
<PDF file={pdf}
page={page}
onDocumentError={onDocumentError}
onDocumentComplete={onDocumentComplete}
/>
<p style={{textAlign: 'center'}}>
Page {page} of {pages}
</p>
<Modal/>;
};export default PdfViewer;

By now, if you click the Show PdfViewer button, you should see the modal pop up with the first page of the provided pdf visible as well as the page indicator at the bottom. You also might notice that the displayed pdf is a bit left aligned. To fix this, you can add a wrapper around and apply the below styles.

.pdfWrapper{
display: flex;
align-items: center;
justify-content: center;
overflow-x: auto;
}

The pdf should now be nice and centered. And if your screen gets too small and the pdf overflows, the added attribute should allow the user to scroll horizontally to see any overflowed portion of the pdf. Let’s check it out.

Awesome! Now let’s add some controls so the user can see the other pages. We can do this by adding a to our modal, and in that prop make a that wraps two Ant Design components. One for Previous, and one for Next. See the footer element below.

const footer = <div className="footer">
<Button onClick={()=>onPage(0)}>Previous</Button>
<Button onClick={()=>onPage(1)}>Next</Button>
</div>

Our class will have the style attributes below.

.footer{
display: flex;
justify-content: space-between;
}

Now we can include as a prop for our . You should now see two buttons at the bottom of the . However, these buttons don’t do anything yet because we need to define our function. This function will act as the navigator for both previous and next functionality. We pass a for a previous action, and a for a next action. This can allow us to determine which direction to go in regards to setting the value for .

const onPage = (type) =>{
var newPage = type ? page + 1 : page - 1
setPage(newPage)
}

This is good, but what happens if we exceed our pages?

That’s not good! I’m not sure why the creator of this library didn’t build some default behavior to handle this logic but no worries! We can create our own.

if (newPage > pages){
newPage = 1
} else if (newPage < 1){
newPage = pages
}

This logic is resetting the value of before we officially set the value for . If we go too far next (), we set to 1, effectively looping back to the first page of the pdf. If we go too far back () then we set equal to the total number of , looping back to the end. This way we can cycle fully and correctly through the pdf no matter how many times a user clicks Next or Previous. Our final should look like the following.

const onPage = (type) =>{ var newPage = type ? page + 1 : page - 1 if (newPage > pages){
newPage = 1
} else if (newPage < 1){
newPage = pages
} setPage(newPage)
}

Now, let’s see our PDF viewer in action.

It’s looking pretty good! The user can now effectively cycle through the pages of the pdf. While this is what the original feature called for, we can take things a step further.

Bonus: scale

Another prop that we can pass to is . With , we can manage how large our pdf file is to scale. By default is 1. First, let’s make a new state value for .

const [scale, setScale] = useState(1); //default to 1

Next, let’s make a few changes to our footer. Our footer will now include tools to allow the user to zoom in up to % (true scale of 2) or down to 10% (true scale of ). Let’s import and from Ant Design. These will be the icons the user clicks in order to zoom in or out.

import {ZoomInOutlined, ZoomOutOutlined} from '@ant-design/icons';

Now that they’re imported, let’s start constructing our new footer.

const zoomStyle = {
marginLeft: 10,
cursor: 'pointer'
}const footer = <div className="footer">
<Button onClick={()=>onPage(0)}>Previous</Button>
<div>
<span style={{textAlign: 'center'}}>Page {page} of {pages}</span
<ZoomOutOutlined style={zoomStyle} onClick={()=>onSetScale(0)}/>
<ZoomInOutlined style={zoomStyle} onClick={()=>onSetScale(1)}/>
<span>{www.cronistalascolonias.com.ar(scale * )}%</span>
</div>
<Button onClick={()=>onPage(1)}>Next</Button>
</div>

As you can see, we also moved the page indicator into the footer too. This is because we’re going to give the Modal the prop to give it a fixed height and allow any vertically overflowed content to be scrollable.

bodyStyle={{height: , overflowY: 'auto'}}

I originally tried this on the but for some reason if the scale got too high it would still cut off some of the pdf page. Now that we have our and reconfigured to support increasing scale, let’s move on to our function.

const onSetScale = (type) =>{
var newScale = type ? scale + : scale - ; if (newScale > 2){
newScale = 2
} else if (newScale < ){
newScale =
} setScale(newScale)
}

It’s pretty similar to our function. I was originally trying to consolidate the two but since their end logic is a bit different I figured it was simpler to just keep their functions separate. Now that we have our scale UI and functionality in place, let’s see our final product.

And there you have it. A relatively simple yet robust implementation of to allow users to open, navigate and zoom in/out of a pdf. All accompanying code to this demo can be found on GitHub.