Back to Details

puppeteer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Puppeteer Tool

Puppeteer 工具

Description

功能描述

Headless Chrome/Chromium automation for PDF generation, screenshots, web scraping, and testing.
基于Headless Chrome/Chromium的自动化工具，可用于PDF生成、截图、网页爬虫和测试。

Source

来源

Installation

安装

bash
npm install puppeteer
bash
npm install puppeteer

Usage Examples

使用示例

Generate PDF from HTML

从HTML生成PDF

typescript
import puppeteer from 'puppeteer';

async function generatePDF(html: string, outputPath: string) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.setContent(html, { waitUntil: 'networkidle0' });
  
  await page.pdf({
    path: outputPath,
    format: 'A4',
    margin: { top: '20mm', right: '20mm', bottom: '20mm', left: '20mm' },
    printBackground: true,
  });
  
  await browser.close();
}

// Usage
const html = `
  <html>
    <head><style>body { font-family: Arial; }</style></head>
    <body><h1>Invoice #001</h1><p>Total: $100.00</p></body>
  </html>
`;
await generatePDF(html, 'invoice.pdf');
typescript
import puppeteer from 'puppeteer';

async function generatePDF(html: string, outputPath: string) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.setContent(html, { waitUntil: 'networkidle0' });
  
  await page.pdf({
    path: outputPath,
    format: 'A4',
    margin: { top: '20mm', right: '20mm', bottom: '20mm', left: '20mm' },
    printBackground: true,
  });
  
  await browser.close();
}

// Usage
const html = `
  <html>
    <head><style>body { font-family: Arial; }</style></head>
    <body><h1>Invoice #001</h1><p>Total: $100.00</p></body>
  </html>
`;
await generatePDF(html, 'invoice.pdf');

Take Screenshot

截取网页截图

typescript
async function takeScreenshot(url: string, outputPath: string) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.setViewport({ width: 1920, height: 1080 });
  await page.goto(url, { waitUntil: 'networkidle2' });
  
  await page.screenshot({
    path: outputPath,
    fullPage: true,
    type: 'png',
  });
  
  await browser.close();
}
typescript
async function takeScreenshot(url: string, outputPath: string) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.setViewport({ width: 1920, height: 1080 });
  await page.goto(url, { waitUntil: 'networkidle2' });
  
  await page.screenshot({
    path: outputPath,
    fullPage: true,
    type: 'png',
  });
  
  await browser.close();
}

Web Scraping

网页爬虫

typescript
async function scrapeData(url: string) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto(url, { waitUntil: 'domcontentloaded' });
  
  const data = await page.evaluate(() => {
    const items = document.querySelectorAll('.product');
    return Array.from(items).map(item => ({
      title: item.querySelector('h2')?.textContent?.trim(),
      price: item.querySelector('.price')?.textContent?.trim(),
    }));
  });
  
  await browser.close();
  return data;
}
typescript
async function scrapeData(url: string) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto(url, { waitUntil: 'domcontentloaded' });
  
  const data = await page.evaluate(() => {
    const items = document.querySelectorAll('.product');
    return Array.from(items).map(item => ({
      title: item.querySelector('h2')?.textContent?.trim(),
      price: item.querySelector('.price')?.textContent?.trim(),
    }));
  });
  
  await browser.close();
  return data;
}

Form Automation

表单自动化

typescript
async function submitForm(url: string, formData: Record<string, string>) {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  
  await page.goto(url);
  
  // Fill form fields
  for (const [selector, value] of Object.entries(formData)) {
    await page.type(selector, value);
  }
  
  // Submit
  await page.click('button[type="submit"]');
  await page.waitForNavigation();
  
  await browser.close();
}
typescript
async function submitForm(url: string, formData: Record<string, string>) {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  
  await page.goto(url);
  
  // Fill form fields
  for (const [selector, value] of Object.entries(formData)) {
    await page.type(selector, value);
  }
  
  // Submit
  await page.click('button[type="submit"]');
  await page.waitForNavigation();
  
  await browser.close();
}

PDF Options

PDF 配置选项

typescript
interface PDFOptions {
  path?: string;
  scale?: number;                    // 0.1 - 2, default 1
  displayHeaderFooter?: boolean;
  headerTemplate?: string;
  footerTemplate?: string;
  printBackground?: boolean;
  landscape?: boolean;
  pageRanges?: string;               // '1-5, 8, 11-13'
  format?: 'Letter' | 'Legal' | 'A4' | 'A3';
  width?: string;
  height?: string;
  margin?: { top, right, bottom, left };
}
typescript
interface PDFOptions {
  path?: string;
  scale?: number;                    // 0.1 - 2, default 1
  displayHeaderFooter?: boolean;
  headerTemplate?: string;
  footerTemplate?: string;
  printBackground?: boolean;
  landscape?: boolean;
  pageRanges?: string;               // '1-5, 8, 11-13'
  format?: 'Letter' | 'Legal' | 'A4' | 'A3';
  width?: string;
  height?: string;
  margin?: { top, right, bottom, left };
}

Tags

标签

browser
, 
pdf
, 
screenshot
, 
automation
, 
scraping
browser
, 
pdf
, 
screenshot
, 
automation
, 
scraping

Compatibility

兼容性

  • Codex: ✅
  • Claude Code: ✅
  • Codex: ✅
  • Claude Code: ✅