从API获取数据时如何判断文件为PDF或图片以实现预览？

1. 优先读取HTTP响应头的Content-Type字段 #

这是最直接的判断方式，服务器返回文件时通常会在响应头里标注Content-Type：

• PDF对应的类型是application/pdf
• 图片常见类型：image/jpeg（JPG）、image/png（PNG）、image/gif（GIF）、image/webp（WebP）

示例代码（JavaScript）：

fetch('your-api-url')
  .then(response => {
    const contentType = response.headers.get('Content-Type');
    if (contentType?.includes('application/pdf')) {
      // 处理PDF预览逻辑
    } else if (contentType?.startsWith('image/')) {
      // 处理图片预览逻辑
    }
  });

2. 通过文件名扩展名辅助判断 #

如果API返回的响应里附带文件名（比如在Content-Disposition头或接口返回的JSON字段中），可以截取文件名后缀判断：

• 后缀为.pdf则判定为PDF文件
• 后缀为.jpg/.jpeg/.png/.gif/.webp则判定为图片

注意：这种方式不可靠，因为扩展名可被伪造，仅作为补充判断手段。

3. 检查文件签名（Magic Number）——最准确的方式 #

文件开头的固定字节（签名）是真实类型的核心标识，不受扩展名和Content-Type篡改影响：

• PDF文件开头是%PDF-（对应字节：25 50 44 46 2D）
• JPG开头是FF D8 FF
• PNG开头是89 50 4E 47 0D 0A 1A 0A
• GIF开头是47 49 46 38（对应GIF89a或GIF87a）

示例代码（JavaScript，读取ArrayBuffer前几个字节）：

fetch('your-api-url')
  .then(response => response.arrayBuffer())
  .then(buffer => {
    const view = new Uint8Array(buffer.slice(0, 8));
    // 判断PDF
    if (view[0] === 0x25 && view[1] === 0x50 && view[2] === 0x44 && view[3] === 0x46 && view[4] === 0x2D) {
      // 确认是PDF
    } 
    // 判断PNG
    else if (view[0] === 0x89 && view[1] === 0x50 && view[2] === 0x4E && view[3] === 0x47) {
      // 确认是PNG
    }
    // 其他图片类型可按对应字节逻辑判断
  });

预览处理建议 #

• PDF预览：用浏览器内置的<embed>或<iframe>标签直接加载，或使用pdf.js库实现自定义预览功能
• 图片预览：将文件转为Blob后，通过URL.createObjectURL(blob)生成地址赋值给<img>标签的src属性

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