服务端用Puppeteer生成PDF返回Buffer，客户端下载失败求助

核心问题出在客户端接收数据的格式错误：浏览器环境不存在Node.js的Buffer类型，且默认AJAX请求会把二进制响应解析为文本字符串，破坏了PDF的二进制结构，导致生成的Blob无效。

具体原因 #

你代码里的data as Buffer是错误操作：

• 服务端返回的是合法PDF二进制流，但前端未指定响应类型时，接口会自动将二进制数据解析成UTF-8字符串
• 把字符串当作Buffer传入Blob，生成的文件实际是字符串的编码内容，而非原始PDF二进制数据，自然无法正常打开

修复步骤 #

1. 请求时指定二进制响应类型
   无论用axios还是fetch，都要明确告诉浏览器接收二进制数据：

   • 使用axios：

     axios.get('/your-pdf-api', { responseType: 'arraybuffer' })
       .then(res => onSuccess(res.data))
     

   • 使用fetch：

     fetch('/your-pdf-api')
       .then(res => res.arrayBuffer())
       .then(data => onSuccess(data))
     

2. 修正客户端Blob生成逻辑
   替换掉错误的Buffer断言，直接用浏览器原生二进制类型处理：

   onSuccess(data) {
     // data此时为ArrayBuffer类型，直接传入Blob
     const blob = new Blob([data], { type: 'application/pdf' })
     const link = document.createElement('a')
     link.href = window.URL.createObjectURL(blob)
     link.download = 'test.pdf'
     link.click()
     // 释放URL对象，避免内存泄漏
     window.URL.revokeObjectURL(link.href)
   },
   

3. 验证服务端响应头（可选）
   确保服务端返回的响应头包含：

   • Content-Type: application/pdf
   • 推荐添加：Content-Disposition: attachment; filename="test.pdf"
     （你提到服务端直接下载正常，这一步大概率没问题，可快速确认）

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