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

Question

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 · Accepted Answer · 2022-09-20 02:28:04Z

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>

answered Sep 20, 2022 at 2:28

Pallamolla Sai

2,5131 gold badge16 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pallamolla Sai Over a year ago

stackoverflow.com/questions/2104608/…

Amit Kumar Over a year ago

Thanks, @Pallamolla Sai this showToolbar ={false} did work for me also. Thanks Again.

axel7083 · Accepted Answer · 2022-09-19 19:34:24Z

1

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.

answered Sep 19, 2022 at 19:34

axel7083

6215 silver badges16 bronze badges

1 Comment

Amit Kumar Over a year ago

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.

RedaHm · Accepted Answer · 2024-11-22 15:34:24Z

I wanted to display a PDF inside a modal using PDFViewer and hide the default toolbar of the PDF viewer. Initially, it was tricky to figure out how to ensure the toolbar doesn't show up in the iframe.

so I did this workaround

Generates a Blob URL for the PDF:

The library provides a method called pdf() that can convert PDF components into a Blob , then into a URL

import PdfViewer from './PdfViewer';

 let blobPdf = await pdf(PdfViewer()).toBlob();
  if (blobPdf) {
    const url = URL.createObjectURL(blobPdf);
    if(url){
       setPdfUrl(url);
      }
  }

Appends #toolbar=0 to the URL:

Once the Blob URL is created, I appended #toolbar=0 to it. This query parameter disables the default toolbar in the PDF viewer.


   <iframe
         src={pdfUrl ? `${pdfUrl}#toolbar=0` : ''}
          style={{
             width: '100%',
              height: '100vh',
             }}
           />

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related