1

I am using react-pdf in react application. I have rendered a pdf using code

<PDFViewer>
      <Document
      onContextMenu={(e) => e.preventDefault()}
    >
      <Page
        size="A4">
          <Text>This is pdf page</Text>
     </Page>
</Document>
</PDFViewer>

It is rendering the pdf but the view width and height are too small, when I try to do some customization with the height and width of PDFViewer it is showing the iframe toolbar how I can solve this or hide this toolbar of the iframe?

Pallamolla Sai
  • 2,337
  • 1
  • 13
  • 14
Amit Kumar
  • 219
  • 1
  • 3
  • 11

2 Answers2

2

Following worked for me in chrome and safari except firefox. We need to understand that displaying the pdf will entirely depends on the browser internal plugins and specifications. So we will not be having more control over hiding the iframe tools bars in browser like firefox.

<PDFViewer width="500" height="500" showToolbar={false}>
   <Document onContextMenu={(e) => e.preventDefault()}>
      <Page size="A4" width="500" height="500">
        <Text>This is pdf page</Text>
      </Page>
   </Document>
</PDFViewer>
Pallamolla Sai
  • 2,337
  • 1
  • 13
  • 14
0

You can take a look at some examples: https://codesandbox.io/s/5d003 Depending on where you trying to display your pdf you can read more about the place it should be displayed here.

axel7083
  • 571
  • 3
  • 16
  • Hi @axel7083, I think you did not understand my question. I am not rendering any other pdf document in my application. I am creating a new pdf dynamically and rendering using PDFViewer in the dom. – Amit Kumar Sep 20 '22 at 00:53