SvelteKit中POST请求返回Puppeteer生成PDF时报Buffer未定义错误

我通过POST请求将表单数据发送到自定义端点，尝试使用puppeteer生成PDF后将其作为响应返回。
/generate端点代码如下：

import { launch } from 'puppeteer';

export async function post({ request }) {
    const browser = await launch({
        headless: true
    });

    const page = await browser.newPage();
    const html = `<div>Test</div>`;
    await page.setContent(html, {
        waitUntil: 'domcontentloaded'
    });

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

    await browser.close();

    return {
        headers: {
            'Content-Type': 'application/pdf'
        },
        status: 200,
        body: pdfBuffer
    };
}

客户端JavaScript代码如下：

try {
    const response = await fetch('/generate', {
        method: 'POST',
        // headers: {
        //  'Content-Type': 'application/json'
        // },
        body: JSON.stringify(values)
    });
    const abuffer = await response.arrayBuffer();
    const buffer = Buffer.from(new Uint8Array(abuffer));
    const buff = await sharp(buffer).toFormat('jpeg').toBuffer();
    let base64data = buff.toString('base64');
    
} catch (e) {
    console.log(e);
}

运行上述代码时收到Buffer is undefined..报错。

Buffer是Node.js环境专属的全局API，浏览器原生运行环境中不存在该对象。另外代码中用到的sharp是Node.js原生图像处理库，本身也无法直接在浏览器环境中运行。

根据代码运行环境选择对应方案：

• 如果代码运行在浏览器端（前端页面脚本）：
  1. 直接使用Uint8Array处理二进制数据即可，不需要调用Buffer.from()做转换
  2. 移除sharp相关逻辑，改用PDF.js这类浏览器兼容的PDF渲染库实现PDF转JPEG的需求，不要使用Node专属的原生模块
  3. 如果需要给服务端传递JSON格式的表单数据，把注释掉的Content-Type: 'application/json'请求头打开，否则服务端可能无法正常解析请求体
• 如果代码运行在Node.js服务端（比如SSR逻辑、二次调用接口的后端服务）：
  1. 部分ESM运行环境下Buffer不会默认挂载到全局，在代码顶部显式导入即可：

     import { Buffer } from 'buffer';
     

  2. 确认项目已经安装sharp依赖，执行npm install sharp完成安装
  3. 同样记得打开POST请求的Content-Type请求头，保证服务端能正常解析传入的JSON参数

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