如何判断a.href标签指向的PDF链接点击后能否正常生成与访问？

方案说明 #

这个需求完全可以实现，核心逻辑是拦截a标签的默认点击行为，先校验PDF资源的可用性，再决定是打开链接还是展示错误提示。

实现步骤 #

• 拦截a标签的默认点击事件，不直接触发跳转
• 点击后先发送请求检测目标URL的返回状态：
  • 请求返回200状态码，且响应头Content-Type为application/pdf，说明PDF生成正常，再手动触发跳转/下载
  • 请求返回4xx/5xx状态码、跨域报错、返回内容非PDF格式时，直接给用户展示错误提示
• 跨域场景下需要PDF服务端配置CORS规则允许当前站点请求，否则可以改用后端代理的方式做校验

代码示例 #

// 校验PDF资源是否可用
const verifyPdfResource = async (pdfUrl) => {
  try {
    const response = await fetch(pdfUrl, {
      method: 'HEAD', // HEAD请求仅获取响应头，性能更好，服务端不支持时可改为GET
      mode: 'cors'
    })
    return response.ok && response.headers.get('Content-Type')?.includes('application/pdf')
  } catch (err) {
    // 网络错误、跨域、服务不可用等场景直接返回失败
    return false
  }
}

// 点击事件处理
const handlePdfLinkClick = async (e) => {
  e.preventDefault()
  const isPdfValid = await verifyPdfResource(URL)
  if (isPdfValid) {
    // 校验通过，手动打开新标签页
    window.open(URL, '_blank', 'noopener noreferrer')
    // 如需保留download属性下载，可替换为以下逻辑：
    // const tempA = document.createElement('a')
    // tempA.href = URL
    // tempA.target = '_blank'
    // tempA.rel = 'noopener noreferrer'
    // tempA.download = 'document.pdf'
    // tempA.click()
  } else {
    // 校验失败，展示错误提示，可替换为项目内的UI提示组件
    alert('PDF生成失败，请稍后重试')
  }
}

// 绑定点击事件后的a标签
<a
  href={URL}
  rel="noopener noreferrer"
  target="_blank"
  download
  onClick={handlePdfLinkClick}
>
  PDF DOCUMENT
</a>

补充说明 #

• 当服务端不支持HEAD请求时，将fetch的method参数改为GET即可，只是会多消耗少量带宽
• 如需更严格的校验，可以请求完整的PDF二进制流，检测文件头是否为%PDF-，大部分业务场景下校验状态码和Content-Type即可满足需求
• 跨域问题无法通过服务端CORS配置解决时，可以让后端提供代理校验接口，由后端发起PDF链接可用性检测，再把结果返回给前端，完全避开浏览器跨域限制

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