如何在react-pdf中渲染加密PDF及处理密码弹窗重复弹出问题

以下是几个针对性的解决方案，直接落地解决问题：

• 手动接管密码验证逻辑，避免默认弹窗循环
  react-pdf的Document组件自带的默认密码弹窗如果处理不当，很容易触发重复弹出。你可以通过onPassword回调完全接管密码输入流程，用自定义状态控制弹窗显示，避免组件自动循环请求。

示例代码：

import { Document, Page } from 'react-pdf';
import { useState } from 'react';

function ProtectedPDFViewer() {
  const [inputPassword, setInputPassword] = useState('');
  const [showPasswordModal, setShowPasswordModal] = useState(false);
  const [isWrongPassword, setIsWrongPassword] = useState(false);

  const handlePasswordRequest = (callback, reason) => {
    setShowPasswordModal(true);
    // 捕获密码错误状态，给用户提示
    if (reason === 'incorrectPassword') {
      setIsWrongPassword(true);
    }

    const submitPassword = () => {
      callback(inputPassword);
      setShowPasswordModal(false);
      setIsWrongPassword(false);
    };

    // 这里渲染自定义密码输入框，替代组件默认弹窗
    window.customPasswordSubmit = submitPassword;
  };

  return (
    <div>
      {showPasswordModal && (
        <div style={{ padding: '20px', border: '1px solid #ccc' }}>
          <input
            type="password"
            value={inputPassword}
            onChange={(e) => setInputPassword(e.target.value)}
            placeholder="输入PDF密码"
          />
          <button onClick={() => window.customPasswordSubmit()}>确认</button>
          {isWrongPassword && <p style={{ color: 'red' }}>密码错误，请重新输入</p>}
        </div>
      )}
      <Document
        file="/your-protected.pdf"
        onPassword={handlePasswordRequest}
      >
        <Page pageNumber={1} />
      </Document>
    </div>
  );
}

• 避免组件不必要重渲染导致重复请求
  如果Document组件因为file属性引用变化反复挂载，会触发多次密码请求。用useMemo稳定文件引用，减少无意义重渲染：

import { useMemo } from 'react';

// 假设file从外部props传入
const stablePdfFile = useMemo(() => props.pdfFile, [props.pdfFile]);

<Document file={stablePdfFile} onPassword={handlePasswordRequest} />

• 升级react-pdf到稳定版
  部分旧版本的react-pdf在加密PDF处理上存在弹窗循环bug，直接升级到最新稳定版大概率能解决问题：

npm update react-pdf
# 或
yarn upgrade react-pdf

• 已知密码直接传入，跳过弹窗
  如果提前拿到了PDF密码，直接通过password属性传入，彻底避免弹窗触发：

<Document
  file="/your-protected.pdf"
  password="your-fixed-password"
>
  <Page pageNumber={1} />
</Document>

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