react-pdf render in dom show toolbar of iframe with custom height width-CodePudding

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?

CodePudding user response：

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.

CodePudding user response：

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>