如何用JavaScript将含CSS打印媒体规则的网页保存为PDF

核心逻辑 #

你要的是复用浏览器打印渲染引擎处理好的@media print样式，跳过手动选择“打印到PDF”的步骤，而非重新构建PDF内容。以下是可行方案：

最可靠方案：后端用Puppeteer生成（完全匹配打印样式） #

这是唯一能100%复用你现有打印样式且完全自动化的方案，原理是用无头浏览器模拟打印流程：

1. 用Puppeteer启动Chromium内核浏览器，加载目标页面
2. 强制启用打印媒体模式，让浏览器渲染出和打印预览一致的内容
3. 直接调用API生成PDF，返回给前端下载

示例Node.js代码：

const puppeteer = require('puppeteer');
const express = require('express');
const app = express();

async function generatePDF(pageUrl) {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  await page.goto(pageUrl, { waitUntil: 'networkidle2' });
  
  // 强制切换到打印媒体样式
  await page.emulateMediaType('print');
  
  const pdf = await page.pdf({
    format: 'A4',
    printBackground: true, // 保留背景色/图片
    margin: { top: '10mm', right: '10mm', bottom: '10mm', left: '10mm' }
  });
  
  await browser.close();
  return pdf;
}

// 前端按钮调用这个接口下载PDF
app.get('/api/download-invoice-pdf', async (req, res) => {
  const pdfBuffer = await generatePDF('https://your-app.com/invoice/123');
  res.set('Content-Type', 'application/pdf');
  res.set('Content-Disposition', 'attachment; filename="invoice-123.pdf"');
  res.send(pdfBuffer);
});

app.listen(3000);

纯前端折中方案（需用户预配置） #

如果不想加后端，可引导用户把浏览器默认打印机设为「保存为PDF」，然后用以下代码触发打印（此时会直接弹出保存对话框，跳过打印选择）：

document.querySelector('#pdf-download-btn').addEventListener('click', () => {
  // 可选：临时切换到打印样式状态（避免屏幕样式干扰）
  document.documentElement.classList.add('force-print-mode');
  window.print();
  document.documentElement.classList.remove('force-print-mode');
});

同步修改CSS，让强制打印模式和媒体查询样式一致：

@media print, .force-print-mode {
  /* 你的现有打印样式 */
}

缺点是需要用户手动配置一次浏览器，但不需要额外依赖。

为什么jsPDF/html2canvas不适用？ #

这些库是基于屏幕渲染的DOM生成内容，不会解析@media print规则，相当于要你把打印样式再重新写一遍，完全浪费了你已有的配置。而上面的方案都是直接复用浏览器的打印渲染逻辑，和你预览的打印效果完全一致。

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