PDFKit Node.js插入网络图片失败求助（附代码）

你遇到的问题大概率是Axios获取图片时的响应类型设置不对，或者base64字符串的格式不符合PDFKit的要求。下面给你两种可行的解决方式，直接用Buffer的方式更高效，也不容易出错：

方式一：直接传入图片Buffer（推荐） #

PDFKit支持直接传入Buffer类型的图片数据，不需要转base64，步骤如下：

1. 用Axios请求图片时，指定responseType: 'arraybuffer'，确保拿到原始二进制数据
2. 将返回的ArrayBuffer转为Node.js Buffer
3. 把Buffer传给doc.image()

const PDFDocument = require('pdfkit');
const axios = require('axios');
const fs = require('fs');

async function generatePDF() {
  const doc = new PDFDocument();
  const outputStream = fs.createWriteStream('result.pdf');
  doc.pipe(outputStream);

  // 请求远程图片，获取二进制数据
  const imgRes = await axios.get('https://ibookinfo.s3.amazonaws.com/ibookprofilepicture1694446561681.png', {
    responseType: 'arraybuffer'
  });
  // 转为Buffer
  const imgBuffer = Buffer.from(imgRes.data, 'binary');

  // 插入到PDF中，可自定义位置和尺寸
  doc.image(imgBuffer, 50, 50, { width: 120 });

  doc.end();
  outputStream.on('finish', () => {
    console.log('PDF生成完毕');
  });
}

generatePDF().catch(err => console.error('生成失败:', err));

方式二：转为正确格式的base64 Data URI #

如果一定要用base64，必须给字符串加上data:image/png;base64,前缀，否则PDFKit无法识别这是图片数据：

async function generatePDFWithBase64() {
  const doc = new PDFDocument();
  const outputStream = fs.createWriteStream('result-base64.pdf');
  doc.pipe(outputStream);

  const imgRes = await axios.get('https://ibookinfo.s3.amazonaws.com/ibookprofilepicture1694446561681.png', {
    responseType: 'arraybuffer'
  });
  // 转base64并添加前缀
  const base64Img = `data:image/png;base64,${Buffer.from(imgRes.data).toString('base64')}`;

  doc.image(base64Img, 50, 50, { width: 120 });

  doc.end();
}

generatePDFWithBase64().catch(err => console.error('生成失败:', err));

常见错误排查 #

• 没设置responseType: 'arraybuffer'：Axios默认会把响应当成文本解析，导致二进制数据损坏，转base64后图片无法识别
• 缺少Data URI前缀：仅传纯base64字符串的话，PDFKit不知道这是图片类型的数据
• 图片URL权限问题：如果目标URL需要授权，得在Axios请求里带上对应的请求头（比如Authorization）

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