React项目中react-pdfobject嵌入PDF的Chrome异常问题求助

我开发的React应用从服务端获取PDF URL，使用react-pdfobject库嵌入PDF。该功能在我所有浏览器中正常，但团队成员仅在Chrome中无法直接显示PDF（需手动打开），Firefox、Safari显示正常。

正常显示效果：

异常显示效果：

相关代码 #

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)}
    />
  </>
);

排查方向与解决方案 #

• 检查Chrome内置PDF查看器设置：让团队成员打开chrome://settings/content/pdfDocuments，确认"下载PDF文件而不是在Chrome中自动打开它们"选项未被勾选。
• 修正服务端响应头：检查服务端返回PDF时的Content-Disposition头，若值为attachment会触发下载，需改为inline以支持内嵌显示。
• 补充react-pdfobject配置：给PDFObject添加pdfOpenParams参数，强制指定显示模式：

  <PDFObject 
    url={selectedDocument.pendingSignaturePdfUrl} 
    pdfOpenParams={{ view: 'FitV', toolbar: 1 }}
  />
  

• 确保容器样式合规：检查PDFContainer的样式，Chrome对flex容器的高度计算可能更严格，建议添加：

  .PDFContainer {
    flex: 1;
    min-height: 0;
    width: 100%;
  }
  

• 清除Chrome缓存：让团队成员清除浏览器缓存或使用无痕模式测试，排除缓存导致的异常。

内容的提问来源于stack exchange，提问作者nyphur