Showing PDF toolbars

[cade-rea]

When using <object> or <embed> to display a PDF blob from react-pdf, the browser's PDF viewer is not showing the toolbars. However, for other PDFs not created by react-pdf, the toolbars show just fine. Is there anything I can do in my PDF content to ensure the toolbars are shown like other PDFs?

I know that the behavior is generally browser-dependent, but I'm getting different behavior within the same browser for PDFs created with react-pdf.

[cade-rea]

Turns out the object needs to be in an element with height, or have a style to declare height. This is a chrome-specific issue. Firefox showed the toolbar the whole time, and Safari showed its overlay. Both of these work for Chrome:

<div style={{height: '80vh', width: '100%'}}>
  <object
    data={pdfData}
    type="application/pdf"
    width="100%"
    height="100%"
  >
    <p>Unable to display PDF.</p>
  </object>
</div>

or

  <object
    data={pdfData}
    style={{height: '80vh', width: '100%'}}
    type="application/pdf"
    width="100%"
    height="100%"
  >
    <p>Unable to display PDF.</p>
  </object>