Puppeteer 实战教程：网页WebP高清截屏 + PDF导出（含Linux部署、中文适配、报错解决）

npm install puppeteer
# pnpm install puppeteer
# yarn add puppeteer

PUPPETEER_SKIP_DOWNLOAD=true

# CMD 终端执行
set PUPPETEER_SKIP_DOWNLOAD=true

# PowerShell 终端执行
$env:PUPPETEER_SKIP_DOWNLOAD = "true"

# 再执行安装
yarn install

# 安装Chromium运行必备系统依赖
yum install -y alsa-lib.x86_64
yum install -y atk.x86_64
yum install -y cups-libs.x86_64
yum install -y gtk3.x86_64
yum install -y ipa-gothic-fonts
yum install -y libXcomposite.x86_64
yum install -y libXcursor.x86_64
yum install -y libXdamage.x86_64
yum install -y libXext.x86_64
yum install -y libXi.x86_64
yum install -y libXrandr.x86_64
yum install -y libXScrnSaver.x86_64
yum install -y libXtst.x86_64
yum install -y pango.x86_64
yum install -y xorg-x11-fonts-100dpi
yum install -y xorg-x11-fonts-75dpi
yum install -y xorg-x11-fonts-cyrillic
yum install -y xorg-x11-fonts-misc
yum install -y xorg-x11-fonts-Type1
yum install -y xorg-x11-utils
yum install -y mesa-libgbm-devel.x86_64

# 更新nss库，修复内核兼容问题
yum update nss -y

# 查看系统已安装中文字体
fc-list :lang=zh

yum install -y fontconfig

# 进入字体目录
cd /usr/share/fonts
# 生成字体索引
mkfontscale
mkfontdir
# 更新系统字体缓存
fc-cache -fv

const puppeteer = require('puppeteer');
const path = require('path');
const fs = require('fs');

// 自动创建输出目录
const OUTPUT_DIR = path.resolve(__dirname, './puppeteer-output');
if (!fs.existsSync(OUTPUT_DIR)) fs.mkdirSync(OUTPUT_DIR);

/**
 * 网页WebP高清截屏
 * @param {string} url 目标网页地址
 * @param {boolean} fullPage 是否整页截图
 * @param {number} quality 画质 0-100
 * @returns {string} 文件路径
 */
async function captureWebpScreenshot(url, fullPage = true, quality = 90) {
  // 兼容Linux服务端、Windows环境的启动参数
  const browser = await puppeteer.launch({
    headless: 'new', // 新版稳定无头模式
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--disable-dev-shm-usage',
      '--disable-features=HttpsFirstBalancedModeAutoEnable' // 修复HTTP页面拦截报错
    ]
  });

  const page = await browser.newPage();
  // 高清渲染，解决截图模糊问题
  await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });
  
  // 等待网页完全加载（动态JS、接口、图片渲染完成）
  await page.goto(url, { waitUntil: 'networkidle0', timeout: 30000 });

  const savePath = path.join(OUTPUT_DIR, `${Date.now()}.webp`);
  // WebP截屏核心配置
  await page.screenshot({
    path: savePath,
    type: 'webp',
    quality,
    fullPage,
    omitBackground: true // 保留透明背景
  });

  await browser.close();
  return savePath;
}

/**
 * 网页导出标准PDF（兼容中文、样式完整）
 * @param {string} url 目标网页地址
 * @returns {string} PDF文件路径
 */
async function exportPageToPdf(url) {
  const browser = await puppeteer.launch({
    headless: 'new',
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--disable-dev-shm-usage',
      '--disable-features=HttpsFirstBalancedModeAutoEnable'
    ]
  });

  const page = await browser.newPage();
  await page.setViewport({ width: 1920, height: 1080 });
  await page.goto(url, { waitUntil: 'networkidle0', timeout: 30000 });

  const savePath = path.join(OUTPUT_DIR, `${Date.now()}.pdf`);
  // PDF生产级配置，解决样式丢失、页眉页脚问题
  await page.pdf({
    path: savePath,
    format: 'A4',
    printBackground: true, // 关键：保留网页背景色/图片
    displayHeaderFooter: false, // 关闭默认网址、时间页眉页脚
    preferCSSPageSize: true, // 优先适配网页CSS页面样式
    margin: { top: '20px', bottom: '20px', left: '20px', right: '20px' }
  });

  await browser.close();
  return savePath;
}

// 测试执行
(async () => {
  const testUrl = 'https://www.baidu.com';
  // 生成WebP截图
  const imgPath = await captureWebpScreenshot(testUrl);
  console.log('WebP截图生成成功：', imgPath);
  // 生成PDF文件
  const pdfPath = await exportPageToPdf(testUrl);
  console.log('PDF文件生成成功：', pdfPath);
})();

npx puppeteer browsers install