基于Playwright或Puppeteer实现web页面打印实现

原创

前端开发Web打印社区

发布于 2025-10-24 11:59:16

820

引言

在Web应用开发中，将HTML页面转换为PDF并进行打印是一个常见需求。Playwright和Puppeteer作为两个主流的无头浏览器解决方案，都提供了强大的PDF生成能力。本文将介绍如何使用这两个工具实现web页面打印，并推荐更专业的web-print-pdf npm包解决方案。

Playwright实现web页面打印

基本用法

const { chromium } = require('playwright');

async function printWithPlaywright(htmlContent) {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  // 设置页面内容
  await page.setContent(htmlContent);
  
  // 生成PDF
  const pdf = await page.pdf({
    format: 'A4',
    printBackground: true,
    margin: { top: '20px', right: '20px', bottom: '20px', left: '20px' }
  });
  
  await browser.close();
  return pdf;
}

从URL打印

async function printFromUrl(url) {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  await page.goto(url);
  await page.waitForLoadState('networkidle');
  
  const pdf = await page.pdf({
    format: 'A4',
    printBackground: true
  });
  
  await browser.close();
  return pdf;
}

Puppeteer实现web页面打印

基本用法

const puppeteer = require('puppeteer');

async function printWithPuppeteer(htmlContent) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.setContent(htmlContent);
  
  const pdf = await page.pdf({
    format: 'A4',
    printBackground: true,
    margin: { top: '20px', right: '20px', bottom: '20px', left: '20px' }
  });
  
  await browser.close();
  return pdf;
}

高级配置

async function advancedPrintWithPuppeteer(htmlContent) {
  const browser = await puppeteer.launch({
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });
  
  const page = await browser.newPage();
  await page.setContent(htmlContent);
  
  const pdf = await page.pdf({
    format: 'A4',
    printBackground: true,
    margin: { top: '20px', right: '20px', bottom: '20px', left: '20px' },
    displayHeaderFooter: true,
    headerTemplate: '<div style="font-size: 10px; text-align: center;">页眉</div>',
    footerTemplate: '<div style="font-size: 10px; text-align: center;">第 <span class="pageNumber"></span> 页 / 共 <span class="totalPages"></span> 页</div>'
  });
  
  await browser.close();
  return pdf;
}

性能对比

特性	Playwright	Puppeteer
启动速度	快	中等
内存占用	低	中等
并发处理	优秀	良好
跨平台支持	优秀	良好
社区活跃度	高	高

推荐方案：web-print-pdf npm包

虽然Playwright和Puppeteer都能实现web页面打印，但对于专业的Web打印需求，推荐使用web-print-pdf npm包，它基于Playwright内核，专门为Web打印场景优化。

安装使用

npm install web-print-pdf

基本用法

import webPrintPdf from 'web-print-pdf';

// 打印HTML内容
const result = await webPrintPdf.printHtml(
  '<h1>测试文档</h1><p>这是打印内容</p>',
  {
    paperFormat: 'A4',
    margin: { top: '20px', bottom: '20px', left: '20px', right: '20px' },
    printBackground: true
  },
  {
    silent: true,
    printerName: 'default'
  }
);

// 从URL打印
const urlResult = await webPrintPdf.printHtmlByUrl(
  'https://example.com/print-page.html',
  { paperFormat: 'A4' },
  { silent: true }
);