Support get the size of the pdf when Pdf loaded?

[PayamSiami]

hello,

is there a way to find page size like A3, A4, A5 ..., in react pdf?

thank you!
payam

[chihhungl]

You can pass onLoadSuccess callback as a prop to <Document /> component. The input parameter of your callback will be an object containing the information about this pdf. Then you can call getPage(pageIndex) which will return a promise that contains the page information.
Something like:

import { Document } from 'react-pdf';

// In your react component

handleLoadSuccess = async (pdfObject) => {
  // If you want to get the dimension for page 1 (1-indexed)
  const page = await pdf.getPage(1);
  console.log(page.width);
  console.log(page.height);
};

render() {
  <Document
    onLoadSuccess={handleLoadSuccess}
    // Other props
  />
};

Once you get the height/width, you'll be able to figure out if it's A3, A4, A5 or letter.

Similarly you can also pass your callback as the onRenderSuccess for <Page /> component. In that case, the parameter you'll get in your callback is page as oppose to the pdf.
Watch out for rotation too as you may need to flip the width and height, and an issue here for a small set of pdfs: #672

[j-perl]

It seems that height and width are not accessible anymore on the page object obtained through getPage. Have they been removed ?

[wojtekmaj]

Just tested that and you can totally still get width and height from page object obtained from pdf.getPage.

[ming2024]

I have to do this

<Document
            file="..."
            onLoadSuccess={async (page) => {
              const pageObj = await page.getPage(1)
              const pageHeight = pageObj.view[3]
            }}
          >
    <Page pageNumber={currentPage} />
  </Document>

[psychopatt]

It seems that height and width are not accessible anymore on the page object obtained through getPage. Have they been removed ?

Just hit the same problem. Using typescript, await document.getPage(1) yields a PdfPageProxy, which doesn't have width and height.
Thanks @j-perl for the view hint.

[wojtekmaj]

Check out the code we're using to expose these handy attributes in React-PDF callbacks:

react-pdf/src/shared/utils.ts

Lines 112 to 135 in 7740ef6

	Object.defineProperty(page, 'width', {
	get() {
	return this.view[2] * scale;
	},
	configurable: true,
	});
	Object.defineProperty(page, 'height', {
	get() {
	return this.view[3] * scale;
	},
	configurable: true,
	});
	Object.defineProperty(page, 'originalWidth', {
	get() {
	return this.view[2];
	},
	configurable: true,
	});
	Object.defineProperty(page, 'originalHeight', {
	get() {
	return this.view[3];
	},
	configurable: true,
	});

So, width is just page.view[2], and height is page.view[3], if rendered at default scale.

[synchronos-t]

It seems that the makePageCallback isn't called when getting the page from the PDFDocumentProxy on the onLoadSuccess event of the Document component. The onLoadSuccess just gives the PDFDocumentProxy as it is, so naturally its getPage() also just returns PDFPageProxy and not the PageCallback. Is this as it is intended?

(PS. @psychopatt It's not just TypeScript. The properties actually aren't there.)

[wojtekmaj]

Document component callbacks return pure document object, Page component callbacks return page object with extra properties. I'm actually not a huge fan of the latter, but I get the convenience some people get from it, so I kept it for now :D

It's best to rely purely on PDF.js-provided data if you care about future compatibility :)

[JorgeHabib]

In latest versions, on every function I execute in onLoadSuccess callback I receive the following error:
TypeError: Cannot read properties of undefined (reading '_transport')

This makes impossible for us to get the height and width of the page, right?

[xpt1x]

Check the answer above by @ming2024 and this

react-pdf/src/shared/utils.ts

Lines 112 to 135 in 7740ef6

	Object.defineProperty(page, 'width', {
	get() {
	return this.view[2] * scale;
	},
	configurable: true,
	});
	Object.defineProperty(page, 'height', {
	get() {
	return this.view[3] * scale;
	},
	configurable: true,
	});
	Object.defineProperty(page, 'originalWidth', {
	get() {
	return this.view[2];
	},
	configurable: true,
	});
	Object.defineProperty(page, 'originalHeight', {
	get() {
	return this.view[3];
	},
	configurable: true,
	});

You can still access it