8

In my ReactJS application I need to add the functionality of zoom in/zoom out. I am using react-pdf to display PDF in my web app. A/C to the documentation there is a scale prop by using which I can scale the pdf page.

But using scale prop doesn't showing me any change in zoom factor. Here is the code which I am using to do so.

<Document
        loading=""
        file={file}
        className="document"
        onLoadSuccess={(transport) => onLoadSuccess(transport, sectionIndex)}>
        <Page width={900} scale={30} className="page" pageNumber={1} />
    </Document>

I have tried following values for scale prop but doesn't seem to get anything. 1.5, 0.5 , 10 , 30 ,40. Is there any better way of doing the same or I am missing something?

Rahul
  • 5,594
  • 7
  • 38
  • 92

2 Answers2

7

Change it to scale={5.0} (or whatever value you want to test), you'll get zoomed in.

The scale prop takes a decimal value separated by .

Hope it helps :)

lele
  • 442
  • 6
  • 14
1

It looks like you can't have a hard coded width and change the scale, from just having this issue myself. My approach is going to be multiplying the page width by a tracked ratio in internal state.

Sally
  • 75
  • 1
  • 15