React-pdf: Responsive PDF with Annotations layer

Created on 19 May 2020 · 4Comments · Source: wojtekmaj/react-pdf

[x] I have read documentation in README
[x] I have checked sample and test suites to see real life basic implementation
[x] I have checked if this question is not already asked

What am I trying to achieve?

I want the PDF Document to scale down as the screen size scales down so everything looks good on mobile, while still maintaining the annotations layer for clickable links.

Describe solutions I've tried

I have pretty much the same problem as this unresolved issue: https://github.com/wojtekmaj/react-pdf/issues/339 , I tried his solution and a few others, to no avail. I can get the document page to scale down, but the annotations layer is not scaling down with the page.

I don't see anything that works with my setup, am I missing something to get the annotations layer to also be responsive?

My current code:
_pdf.css:_

.react-pdf__Document {
   display: flex !important;
   justify-content: center !important;
}

.react-pdf__Page__canvas, .react-pdf__Page__annotations {
   max-width: 100% !important;
   height: auto !important;
}

.pdf-container {
   background-color: lightgray;
   padding: 1% 0 10px 0;
}

@media screen and (min-width: 901px) and (max-width: 1600px) {
   .pdf-container {
      padding: 5% 0 10px 0;
   }
  }

  @media screen and (min-width: 701px) and (max-width: 900px) {
   .pdf-container {
      padding: 10% 0 10px 0;
   }
  }

  @media screen and (max-width: 700px) {
   .pdf-container {
      padding: 20% 0 10px 0;
   }
  }

_Article component:_

 <React.Fragment>
    <div className="pdf-container">
        <Document
            file={this.props.article.pdfUrl}
            onLoadSuccess={this.onDocumentLoadSuccess}
        >
            <Page pageNumber={pageNumber} />
        </Document>
        <Grid fluid className="s-padding-t">
            <Row center="xs">
                <Col xs={12} sm={4} className="s-padding-b">
                    <button
                        type="button"
                        className="s-btn"
                        disabled={pageNumber <= 1}
                        onClick={this.previousPage}
                        >
                        <i className="fa fa-chevron-left"></i> Previous
                    </button>
                </Col>
                <Col xs={12} sm={4} className="s-padding-b">
                    <span>Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'}</span>
                </Col>
                <Col xs={12} sm={4} className="s-padding-b">
                    <button
                        type="button"
                        className="s-btn"
                        disabled={pageNumber >= numPages}
                        onClick={this.nextPage}
                        >
                        Next <i className="fa fa-chevron-right"></i>
                    </button>
                </Col>
            </Row>
        </Grid>
    </div>
</React.Fragment>

Environment

Browser (if applicable) [e.g. Chrome 57, Firefox 59]: Chrome 57
React-PDF version: ^4.1.0
React version: ^16.13.1

Source

douglasrcjames

Most helpful comment

Don't fiddle with css, just set page width like this:

<div ref={documentWrapperRef}>
  <Document file="some_url">
    <Page
      width={documentWrapperRef.current?.getBoundingClientRect().width || undefined}
    />
  </Document>
</div>

oldboyxx on 31 Aug 2020

👍5

All 4 comments

Don't fiddle with css, just set page width like this:

<div ref={documentWrapperRef}>
  <Document file="some_url">
    <Page
      width={documentWrapperRef.current?.getBoundingClientRect().width || undefined}
    />
  </Document>
</div>

oldboyxx on 31 Aug 2020

👍5

@oldboyxx Would be good to use e.g. ResizeObserver on documentWrapperRef, but your solution is definitely getting there :) React-PDF gotta know the exact render size to render all layers properly.