Embedded a PDF in my application, but it tells me to manually open it

Question

I have a React app where I get a URL from my server that contains a PDF, and while I can view it, a team member of mine sees it differently. The strange thing is that, for them, it opens normally in other browsers (firefox, safari), but not on Chrome. For me, it works across browsers.

I'm using the library, react-pdfobject

Example (normal):

This is what they see:

Here is my code:

import { PDFObject } from 'react-pdfobject';

// ....
return (
  <>
    <Modal
      {...props}
      width="auto"
      styles={{ body: { height: window.innerHeight - 300 } }}
      onOk={() => {
        if (!data?.me.signatures.length) {
          setNoSignatureModalOpen(true);
          return;
        }
        bulkSignSignableDocuments();
      }}
      okText="Sign"
    >
      <Typography.Title level={4} style={{ textAlign: 'center' }}>
        Review and approve the {documentCount} {documentCount > 1 ? 'documents' : 'document'}{' '}
        you've selected to sign:
      </Typography.Title>
      <div style={{ display: 'flex', height: '100%' }}>
        <DocumentList
          setSelectedDocument={setSelectedDocument}
          preparedDocuments={preparedDocuments}
        />
        {selectedDocument?.pendingSignaturePdfUrl && (
          <PDFContainer>
            <PDFObject url={selectedDocument.pendingSignaturePdfUrl} />
          </PDFContainer>
        )}
      </div>
    </Modal>
    <NoSignatureModal
      open={noSignatureModalOpen}
      onCancel={() => setNoSignatureModalOpen(false)}
    />
  </>
);

Answer 1

Browsers let users save preferences for actions taken with certain file types. PDFs can be viewed inline or downloaded. Depending on how the file is presented by the webpage, the browser may prompt you to either open it in the browser or download it to your computer. It then saves this preference.

Your situation sounds like the user inadvertently saved a preference to download the file in Chrome. Try removing the preference and see if it fixes the issue.

chrome://settings/content/pdfDocuments

Explanation of similar settings in Firefox, in case anyone needs it: https://support.mozilla.org/en-US/kb/change-firefox-behavior-when-open-file

Answer 2

If you want to force the PDF to display in the browser, then you could use either pdf.js or viewer.js to render the PDF file in the browser.

These can be combined with react-iframe-resizer if you would like the iframe to be sized to match the document.

Answer 3

Every user may have different PDF settings as @pipwerks points out this depends on a per browser profile so chromium's can respond may different ways, depending what profile is active. Here EXACTLY same browser and source view.html with 3 different settings i.e secure and less secure where the least secure will NOT run a PDF. Ideally the more secure on the left should be hardened more. so as to be the same as the default one on the right.

MS Edge has 2 different viewers and may behave slightly differently. however when secured you should see something like middle view below:-