在我的应用程序中嵌入了 PDF，但它告诉我手动打开它

Question

我有一个 React 应用程序，我从服务器获取一个包含 PDF 的 URL，虽然我可以查看它，但我的团队成员却以不同的方式看到它。奇怪的是，对于他们来说，它在其他浏览器（firefox、safari）中可以正常打开，但在 Chrome 上却不能。对我来说，它可以跨浏览器工作。

我正在使用图书馆，

react-pdfobject

示例（正常）：

这就是他们看到的：

这是我的代码：

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

浏览器允许用户保存对某些文件类型执行的操作的首选项。 PDF 可以内联查看或下载。根据网页显示文件的方式，浏览器可能会提示您在浏览器中打开它或将其下载到您的计算机。然后它会保存此首选项。

您的情况听起来像是用户无意中保存了在 Chrome 中下载文件的首选项。尝试删除首选项并查看是否可以解决问题。

chrome://settings/content/pdfDocuments

Firefox 中类似设置的说明，以防有人需要： https://support.mozilla.org/en-US/kb/change-firefox-behavior-when-open-file

Answer 2

如果您想强制 PDF 在浏览器中显示，那么您可以使用 pdf.js 或 viewer.js 在浏览器中呈现 PDF 文件。

如果您希望调整 iframe 的大小以匹配文档，可以将它们与 react-iframe-resizer 结合使用。