如何在React中检测浏览器是否成功渲染文件数据？

1. 利用object标签的error事件（最可靠） #

当浏览器无法渲染object加载的文件时，会触发error事件，我们可以在React中通过监听这个事件来判断渲染是否失败：

import { useState, useMemo, useEffect } from 'react';

const FilePreview = ({ data }) => {
  const [canRender, setCanRender] = useState(true);
  const objectUrl = useMemo(() => URL.createObjectURL(data), [data]);

  const handleRenderError = () => {
    setCanRender(false);
    // 这里可添加降级逻辑，比如提示用户下载文件
  };

  // 组件卸载时释放创建的Object URL，避免内存泄漏
  useEffect(() => {
    return () => URL.revokeObjectURL(objectUrl);
  }, [objectUrl]);

  return (
    <div className="file-preview-container">
      {canRender ? (
        <object
          data={objectUrl}
          onError={handleRenderError}
          style={{ width: '100%', height: '600px' }}
        />
      ) : (
        <p>当前浏览器无法预览该文件，请下载查看</p>
      )}
    </div>
  );
};

2. 提前检测MIME类型支持（仅作初步判断） #

可以通过navigator.mimeTypes对象检查浏览器是否注册了对应文件MIME类型的处理插件，但这种方法有局限性——即使注册了插件，也可能存在插件损坏、被禁用的情况，只能作为辅助判断：

const checkMimeTypeSupport = (mimeType) => {
  const mimeEntry = navigator.mimeTypes[mimeType];
  return mimeEntry && mimeEntry.enabledPlugin !== null;
};

// 使用示例：检查PDF文件支持
console.log(checkMimeTypeSupport('application/pdf')); // 返回true/false

3. 结合fallback内容检测 #

object标签支持嵌套fallback内容，当无法渲染文件时会显示这些内容。我们可以通过判断fallback元素是否可见，来间接确认渲染失败：

import { useRef, useEffect, useMemo } from 'react';

const FilePreview = ({ data }) => {
  const fallbackRef = useRef(null);
  const objectUrl = useMemo(() => URL.createObjectURL(data), [data]);

  useEffect(() => {
    const timer = setTimeout(() => {
      // 延迟判断，避免加载过程中误判
      if (fallbackRef.current && fallbackRef.current.offsetParent !== null) {
        console.log('浏览器无法渲染该文件');
        // 执行降级逻辑
      }
    }, 1000);

    return () => clearTimeout(timer);
  }, [objectUrl]);

  useEffect(() => {
    return () => URL.revokeObjectURL(objectUrl);
  }, [objectUrl]);

  return (
    <object data={objectUrl} style={{ width: '100%', height: '600px' }}>
      <div ref={fallbackRef}>
        当前浏览器无法预览该文件，请下载查看
      </div>
    </object>
  );
};

总结 #

最可靠的方案是结合error事件监听，因为它直接对应实际渲染失败的场景；MIME类型检测可作为前置过滤，减少不必要的渲染尝试；fallback检测则可作为补充方案，应对部分特殊场景。

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