在MUI Tooltip中预览PDF失败的问题排查与解决方案咨询

核心问题分析 #

你使用的@react-pdf/renderer是用于生成PDF文件的库，并非用来预览已上传PDF的工具。这个库的<Document>组件主要配合自定义内容生成PDF，不支持加载外部PDF资源，这就是Tooltip里只显示空白视图区域的根本原因。

针对你猜测的原因逐一验证 #

• URL识别问题：URL.createObjectURL(file)生成的Blob URL是有效的，你可以直接在浏览器地址栏打开它，确认PDF是否能正常显示，排除该问题。
• 文件保存问题：既然Blob URL能成功生成，说明前端已正常读取文件，和后端保存无关（当前场景是前端预览未上传的本地文件）。
• 加载时机问题：Tooltip默认在悬停时才渲染内容，不存在加载过早的情况，问题出在组件选型上。

可行解决方案 #

方案1：用iframe直接预览PDF（最简单） #

利用浏览器原生PDF渲染能力，通过iframe加载Blob URL，无需额外依赖：

import { Tooltip, Zoom, List, ListItem, ListItemAvatar, ListItemText } from '@mui/material';
import DescriptionIcon from '@mui/icons-material/Description';
import { useDropzone } from 'react-dropzone';
import { useCallback } from 'react';

const Dropzone = (props) => {
  const { files, setFiles } = props;

  const onDrop = useCallback((acceptedFiles) => {
    if (acceptedFiles?.length) {
      setFiles(prev => ([
        ...prev,
        ...acceptedFiles.map(file => ({
          ...file,
          preview: URL.createObjectURL(file)
        }))
      ]));
    }
  }, []);

  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <List>
        {files.map((file, index) => (
          <Tooltip
            key={`${file.name}-${index}`}
            TransitionComponent={Zoom}
            title={
              <iframe
                src={file.preview}
                width="300"
                height="400"
                style={{ border: 'none' }}
              />
            }
          >
            <ListItem>
              <ListItemAvatar>
                <DescriptionIcon />
              </ListItemAvatar>
              <ListItemText
                primary={file.name}
                secondary={`${(file.size / 1024).toFixed(2)} KB`}
              />
            </ListItem>
          </Tooltip>
        ))}
      </List>
    </div>
  );
};

export default Dropzone;

方案2：用专用PDF预览库（功能更丰富） #

如果需要分页、缩放等复杂功能，可使用@react-pdf/viewer库：

1. 先安装依赖：

npm install @react-pdf-viewer/core @react-pdf-viewer/default-layout

2. 代码实现：

import { Tooltip, Zoom, List, ListItem, ListItemAvatar, ListItemText } from '@mui/material';
import DescriptionIcon from '@mui/icons-material/Description';
import { useDropzone } from 'react-dropzone';
import { useCallback } from 'react';
import { Viewer } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';

const Dropzone = (props) => {
  const { files, setFiles } = props;
  const defaultLayoutPluginInstance = defaultLayoutPlugin();

  const onDrop = useCallback((acceptedFiles) => {
    if (acceptedFiles?.length) {
      setFiles(prev => ([
        ...prev,
        ...acceptedFiles.map(file => ({
          ...file,
          preview: URL.createObjectURL(file)
        }))
      ]));
    }
  }, []);

  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <List>
        {files.map((file, index) => (
          <Tooltip
            key={`${file.name}-${index}`}
            TransitionComponent={Zoom}
            title={
              <div style={{ width: '300px', height: '400px' }}>
                <Viewer fileUrl={file.preview} plugins={[defaultLayoutPluginInstance]} />
              </div>
            }
          >
            <ListItem>
              <ListItemAvatar>
                <DescriptionIcon />
              </ListItemAvatar>
              <ListItemText
                primary={file.name}
                secondary={`${(file.size / 1024).toFixed(2)} KB`}
              />
            </ListItem>
          </Tooltip>
        ))}
      </List>
    </div>
  );
};

export default Dropzone;

额外注意事项 #

• 组件卸载或文件移除时，记得调用URL.revokeObjectURL(file.preview)释放内存，避免泄漏。
• 如果是已上传到服务器的PDF，直接将file.preview替换为服务器文件URL即可。

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