reactjspdfkitpdf-viewerreact-pdf

Unable to hide the iframe toolbar menu while rendering the pdf with custom height and width using react-pdf


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?


Solution

  • 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>