使用Puppeteer导出PDF时，能否控制图片格式与质量？

核心原因是PDF标准不支持WebP格式，Puppeteer生成PDF时会自动将WebP转成PDF兼容的PNG/JPEG格式，这导致了PDF体积暴涨。目前没有Puppeteer原生API直接控制该转换过程，但可以通过以下手动干预的方式实现需求：

方案一：提前转换WebP为指定质量的JPEG并替换页面图片 #

在页面加载完成后，通过Puppeteer的evaluate方法遍历页面中的WebP图片，将其转换为指定质量的JPEG后替换原图片，再执行PDF打印：

await page.evaluate(async (quality) => {
  const webpImgs = document.querySelectorAll('img[src$=".webp"]');
  for (const img of webpImgs) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const tempImg = new Image();
    tempImg.src = img.src;
    await new Promise(resolve => tempImg.onload = resolve);
    
    canvas.width = tempImg.width;
    canvas.height = tempImg.height;
    ctx.drawImage(tempImg, 0, 0);
    
    // 转换为指定质量的JPEG，参数范围0-1，对应0%-100%质量
    const jpegDataUrl = canvas.toDataURL('image/jpeg', quality);
    img.src = jpegDataUrl;
    img.removeAttribute('srcset');
  }
}, 0.7); // 这里传入70%质量的参数，可按需调整

// 执行PDF打印
await page.pdf({
  path: 'output.pdf',
  format: 'A4'
});

该方式能精准控制转换后的图片质量，让PDF体积接近原WebP的大小。

方案二：配合CSS打印样式优化 #

通过注入CSS样式，辅助浏览器在打印时优化图片处理，可配合方案一使用：

await page.addStyleTag({
  content: `
    @media print {
      img {
        image-rendering: optimizeQuality;
      }
    }
  `
});

方案三：优化PDF打印参数 #

调用page.pdf()时，合理设置参数减少额外体积开销：

await page.pdf({
  path: 'output.pdf',
  format: 'A4',
  printBackground: false, // 无需背景图时关闭
  preferCSSPageSize: true, // 优先使用CSS定义的页面尺寸
  margin: { top: '0', right: '0', bottom: '0', left: '0' } // 按需设置边距
});

其中方案一的效果最直接可控，能完全按照需求设置转换格式和质量，达成PDF体积接近原WebP的目标。

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