How To minimize the height of pdf-viewer-reactjs

Question

I am New to react, I am using pdf-viewer-reactjs to display the pdf file, I want to fix the height of the pdf, I tried with style, it is not working, even I wrapped the pdf with div and fix the height it is also not working, I tried even height props it is also not working, anyone please guide me with this thank u in advance.

import PDFViewer from 'pdf-viewer-reactjs'

<PDFViewer document={{url: url}} hideNavbar={true} scale={true} css={classes.pdfView}/>

shwetha c · Accepted Answer · 2021-09-02 17:43:46Z

1

By using CanvasCss we can minimize the height and width

<PDFViewer 
      document={{url:url}}
      hideNavbar={true}
      scale={0.2}
      canvasCss={classes.pdfView}
    />

style.js

pdfView:{
    height:"200px",
    overflow:"auto",
  }

answered Sep 2, 2021 at 17:43

shwetha c

511 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

OneNeptune Over a year ago

This is actually supported by the README for pdf-viewer-reactjs github.com/ansu5555/pdf-viewer-reactjs

zainsci · Accepted Answer · 2021-09-01 10:03:56Z

0

Having a parent element with a fixed height and an overflow of hidden may solve the problem for you.

<div style={{ height: "500px", overflow: "hidden" }}>
    <PDFViewer 
        document={{url: url}} 
        hideNavbar={true}  
        scale={true} 
        css={classes.pdfView}
    />
</div>

answered Sep 1, 2021 at 10:03

zainsci

2491 gold badge2 silver badges8 bronze badges

Collectives™ on Stack Overflow

How To minimize the height of pdf-viewer-reactjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related