如何用JavaScript/TypeScript将API返回的Byte[]生成PDF并解决空白页问题

Node.js 环境解决方案 #

核心要点 #

• 请求API时必须明确获取原始二进制数据，避免默认转成UTF-8字符串（多数HTTP库默认会做字符串转换，直接破坏二进制结构）
• 写入文件时直接使用Buffer类型数据，不要指定'binary'这类错误编码（Node.js的'binary'基于latin1编码，会损坏PDF二进制内容）

示例代码（Axios） #

import axios from 'axios';
import fs from 'fs';

async function savePdfFromApi() {
  try {
    // 指定responseType为arraybuffer，确保拿到未被篡改的二进制数据
    const response = await axios.get('你的API接口地址', {
      responseType: 'arraybuffer'
    });

    // 将ArrayBuffer转换为Node.js兼容的Buffer
    const pdfBuffer = Buffer.from(response.data);

    // 直接写入文件，无需额外指定编码
    fs.writeFileSync('output.pdf', pdfBuffer);
    console.log('PDF保存成功');
  } catch (error) {
    console.error('保存失败:', error);
  }
}

savePdfFromApi();

示例代码（原生http模块） #

const http = require('http');
const fs = require('fs');

function savePdf() {
  const request = http.get('你的API接口地址', {
    headers: { 'Accept': 'application/pdf' }
  }, (res) => {
    const chunks = [];
    res.on('data', chunk => chunks.push(chunk));
    res.on('end', () => {
      const pdfBuffer = Buffer.concat(chunks);
      fs.writeFileSync('output.pdf', pdfBuffer);
      console.log('PDF保存完成');
    });
  });
  request.end();
}

savePdf();

浏览器环境解决方案 #

核心要点 #

• 将API返回的ArrayBuffer/Uint8Array转换为Blob对象（指定MIME类型为application/pdf）
• 请求时同样要设置responseType: 'arraybuffer'，避免数据被转成字符串

示例代码（Axios + FileSaver） #

import axios from 'axios';
import { saveAs } from 'file-saver';

async function downloadPdf() {
  try {
    const response = await axios.get('你的API接口地址', {
      responseType: 'arraybuffer',
      headers: { 'Accept': 'application/pdf' }
    });

    // 创建PDF格式的Blob
    const pdfBlob = new Blob([response.data], { type: 'application/pdf' });

    // 调用FileSaver保存文件
    saveAs(pdfBlob, 'output.pdf');
  } catch (error) {
    console.error('下载失败:', error);
  }
}

downloadPdf();

常见问题排查 #

• 空白PDF原因1：响应数据被转成字符串：未设置responseType: 'arraybuffer'，导致HTTP库把二进制数据当成UTF-8字符串解析，文件结构完全损坏。
• 空白PDF原因2：编码指定错误：Node.js中使用fs.writeFileSync时指定'binary'编码，会用latin1规则处理数据，破坏PDF二进制结构，直接写入Buffer即可。
• 空白PDF原因3：API返回数据本身无效：可以打印response.data的字节长度，或者将Buffer转成base64后用在线PDF预览工具验证，确认API返回的是有效PDF数据。

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