React组件加载时检查PDF URL有效性的实现方案

核心思路 #

通过发送HEAD请求（比GET请求更轻量，仅获取响应头）检测目标PDF文件的URL是否能返回有效响应，根据结果动态显示或隐藏下载按钮。

原生JavaScript实现 #

// 检测PDF是否存在的异步函数
async function checkPdfExists(pdfUrl) {
  try {
    const response = await fetch(pdfUrl, { method: 'HEAD' });
    // 状态码200-299之间判定为文件存在
    return response.ok;
  } catch (error) {
    // 网络错误、跨域问题等均判定为文件不存在
    return false;
  }
}

// 页面/组件加载时执行检测
document.addEventListener('DOMContentLoaded', async () => {
  const targetPdfUrl = '...url/variouspart' + partId + '.pdf'; // 替换为实际零件的PDF URL
  const pdfExists = await checkPdfExists(targetPdfUrl);
  const downloadBtn = document.getElementById('pdf-download-btn');

  downloadBtn.style.display = pdfExists ? 'block' : 'none';
});

React组件示例 #

import { useState, useEffect } from 'react';

const PartDetailPage = ({ partId }) => {
  const [isPdfAvailable, setIsPdfAvailable] = useState(false);
  const pdfUrl = `...url/variouspart${partId}.pdf`;

  useEffect(() => {
    const checkPdfAvailability = async () => {
      try {
        const response = await fetch(pdfUrl, { method: 'HEAD' });
        setIsPdfAvailable(response.ok);
      } catch (err) {
        setIsPdfAvailable(false);
      }
    };

    checkPdfAvailability();
  }, [pdfUrl]);

  return (
    <div className="part-detail">
      {/* 零件详情内容 */}
      {isPdfAvailable && (
        <a href={pdfUrl} download className="download-button">
          可下载
        </a>
      )}
    </div>
  );
};

export default PartDetailPage;

关键注意事项 #

• 跨域处理：如果PDF文件域名与应用域名不同，前端直接请求会触发CORS错误。此时需要后端提供一个检测接口（例如/api/check-pdf-exists?url=xxx），由后端完成文件存在性检测，前端调用该接口获取结果。
• 性能优化：对相同零件的检测结果进行缓存（如本地Storage或内存缓存），短时间内重复访问无需重复请求服务器。
• 错误边界：网络故障、服务器5xx错误等场景均需判定为文件不可用，避免用户看到无效按钮。

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