NextJS 13中如何解析Buffer数据生成PDF？Puppeteer路由处理遇阻

你遇到的问题是因为NextResponse.json()会将Buffer序列化为JSON格式的对象（比如{ type: 'Buffer', data: [...] }），浏览器无法将其识别为PDF文件。在Next.js 13的App Router中，你需要直接返回二进制数据并设置正确的响应头，让浏览器识别这是一个PDF文件。

修改后的路由处理代码如下：

// app/api/pdf/route.ts 
import { NextResponse } from 'next/server'
import puppeteer from 'puppeteer'

export async function GET() {
  let browser;
  try {
    browser = await puppeteer.launch()
    const page = await browser.newPage()

    await page.goto('http://localhost:3000')
    await page.emulateMediaType('screen')

    const pdfBuffer = await page.pdf({ format: 'A4' })

    // 构造PDF响应，设置正确的头部
    return new NextResponse(pdfBuffer, {
      headers: {
        'Content-Type': 'application/pdf',
        'Content-Disposition': 'inline; filename="page.pdf"', // inline是预览，改为attachment则触发下载
      },
    })
  } finally {
    // 确保浏览器实例无论成功失败都能关闭
    if (browser) {
      await browser.close()
    }
  }
}

关键改动说明： #

• 用new NextResponse()直接传入pdfBuffer作为响应体，替代会序列化Buffer的NextResponse.json()
• 设置Content-Type为application/pdf，明确告诉浏览器响应内容的类型
• Content-Disposition头部控制浏览器行为：inline让浏览器直接预览PDF，改为attachment则会触发文件下载，同时可指定文件名
• 增加try/finally块，确保Puppeteer的浏览器实例总是能被关闭，避免资源泄漏

内容的提问来源于stack exchange，提问作者Krzysztof Podmokły