How can I eliminate the whitespace between pages when rendering a PDF as a single page using react-pdf?

24 views Asked by At

I've merged two pages into one using pageNumber in react-pdf, but I'm struggling to remove the whitespace that appears where the second page starts.

How can I eliminate the whitespace at the bottom of the first page?

export default class ResumePage extends Component {
  state = {
    numPages: null,
    PDFWidth: null
  };
  myInput = React.createRef()

  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  };

  componentDidMount() {
    // setting width at initial
    this.setPDFWidth()
    // event listener when window is resized
    window.addEventListener('resize', this.setPDFWidth)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.setPDFWidth)
  }

  setPDFWidth = () => {
    const width = this.myInput.current.offsetWidth
    this.setState({ PDFWidth: width })
  }

  render() {
    const { numPages, PDFWidth } = this.state;
  
    return (
      <section className="resumePage">
        <div ref={this.myInput}>
          <Document
            file={Resume}
            onLoadSuccess={this.onDocumentLoadSuccess}
          >
            {[1,2].map(page => (
              <Page
              pageNumber={page}
              width={PDFWidth} />
            ))}
          </Document>
        </div>
      </section>
    );
  }  
}

0

There are 0 answers