前端二进制文件处理：Blob与ArrayBuffer实战指南

1. 前端二进制文件处理的核心概念

作为一名前端开发者，处理二进制文件是我们经常遇到的场景。无论是PDF预览、图片展示还是Excel导出，都需要我们对二进制数据有深入理解。二进制文件与文本文件最大的区别在于其存储格式 - 它们以字节序列形式存储，不能直接用文本编辑器查看。

1.1 Blob对象详解

Blob（Binary Large Object）是前端处理二进制数据的核心对象。它有几个关键特性值得注意：

• 不可变性：一旦创建，内容无法更改。这与JavaScript中其他可变对象（如Array）形成鲜明对比
• 类文件特性：Blob对象包含size（字节大小）和type（MIME类型）属性，模拟了文件的基本特征
• 切片能力：通过slice()方法可以分割大文件，这对处理大型媒体文件特别有用

javascript复制// 创建一个简单的文本Blob
const textBlob = new Blob(['Hello, world!'], {type: 'text/plain'})
console.log(textBlob.size) // 13字节
console.log(textBlob.type) // "text/plain"

1.2 ArrayBuffer与Blob的关系

很多开发者容易混淆ArrayBuffer和Blob。简单来说：

• ArrayBuffer：表示通用的、固定长度的原始二进制数据缓冲区
• Blob：更高级的封装，专为处理文件类数据设计

javascript复制// ArrayBuffer转Blob
const buffer = new ArrayBuffer(8)
const blob = new Blob([buffer], {type: 'application/octet-stream'})

提示：在处理纯二进制数据（如WebSocket传输）时用ArrayBuffer，处理文件类数据时用Blob更合适。

2. 后端接口配置要点

2.1 后端响应头设置

后端返回二进制数据时，必须正确设置响应头。以Spring Boot为例：

java复制@GetMapping("/download")
public ResponseEntity<byte[]> downloadFile() {
    byte[] data = // 获取文件数据
    HttpHeaders headers = new HttpHeaders();
    
    // 关键设置
    headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
    headers.setContentDisposition(
        ContentDisposition.attachment()
                         .filename("report.pdf", StandardCharsets.UTF_8)
                         .build());
    
    return new ResponseEntity<>(data, headers, HttpStatus.OK);
}

2.2 前端请求配置

前端使用axios时，必须明确指定responseType：

javascript复制axios.get('/api/download', {
  responseType: 'blob' // 必须设置
}).then(response => {
  // 处理blob数据
})

常见错误：

1. 忘记设置responseType导致接收的是字符串而非Blob
2. 后端未设置Content-Type导致浏览器无法识别文件类型

3. 二进制数据预览实战

3.1 PDF预览完整实现

PDF预览是常见需求，以下是增强版的实现：

javascript复制async function previewPDF(fileId) {
  try {
    // 显示加载状态
    const loading = showLoading()
    
    // 获取数据
    const response = await axios.get(`/api/files/${fileId}`, {
      responseType: 'blob'
    })
    
    // 创建Blob
    const pdfBlob = new Blob([response.data], {
      type: response.headers['content-type'] || 'application/pdf'
    })
    
    // 处理文件名
    const fileName = getFileNameFromHeaders(response.headers)
    
    // 创建对象URL
    const objectUrl = URL.createObjectURL(pdfBlob)
    
    // 使用iframe避免弹窗被拦截
    const iframe = document.createElement('iframe')
    iframe.src = objectUrl
    iframe.style.width = '100%'
    iframe.style.height = '80vh'
    document.body.appendChild(iframe)
    
    // 清理资源
    iframe.onload = () => {
      URL.revokeObjectURL(objectUrl)
      loading.hide()
    }
    
    return { iframe, url: objectUrl }
  } catch (error) {
    console.error('预览失败:', error)
    loading.hide()
    showError('预览失败，请重试')
    throw error
  }
}

3.2 图片预览的进阶技巧

图片预览看似简单，但有些细节需要注意：

javascript复制function previewImage(blob) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    const url = URL.createObjectURL(blob)
    
    img.onload = () => {