赋能数字化：Puppeteer 生成 PDF 全攻略

2024-02-15 03:20:08

数字化浪潮中的 PDF 生成需求

随着数字化转型席卷全球，对交互式且可访问的数字文档的需求激增。PDF 凭借其跨平台兼容性和内容丰富性，已成为数字文档的首选格式。因此，生成高质量 PDF 文档的能力已成为数字化转型中的关键要素。

Puppeteer：赋能 PDF 生成的无头浏览器

Puppeteer 是一个由 Google 开发的 Node.js 库，可用于控制无头 Chromium 浏览器。凭借其强大的特性，Puppeteer 成为生成 PDF 文档的理想工具，因为它允许您通过编程方式与浏览器进行交互。

Puppeteer 生成 PDF 全攻略

步骤 1：安装 Puppeteer

npm install puppeteer

步骤 2：创建无头浏览器

const puppeteer = require('puppeteer');
const browser = await puppeteer.launch();

步骤 3：导航到目标页面

const page = await browser.newPage();
await page.goto('https://example.com');

步骤 4：生成 PDF

const pdf = await page.pdf({
  path: 'example.pdf',
  format: 'A4',
  printBackground: true
});

步骤 5：关闭浏览器

await browser.close();

优化 PDF 生成的提示

利用 CSS 媒体查询： 使用 CSS 媒体查询可以控制 PDF 呈现时的布局和样式。
设置页面大小和方向： 可以使用 page.pdf() 方法指定 PDF 的大小和方向。
添加页眉和页脚： 通过使用 page.addStyleTag() 方法，可以将自定义 HTML 和 CSS 添加到 PDF 页眉和页脚。
生成交互式 PDF： Puppeteer 允许您通过添加书签、链接和注释来创建交互式 PDF。

示例代码：生成带书签的 PDF

const puppeteer = require('puppeteer');
const browser = await puppeteer.launch();
const page = await browser.newPage();

await page.goto('https://example.com');

await page.addStyleTag({
  content: `
    a[href^="#"] {
      text-decoration: none;
      background-color: #e6e6e6;
      padding: 5px;
      border: 1px solid #000;
    }
  `
});

await page.pdf({
  path: 'example.pdf',
  format: 'A4',
  printBackground: true,
  displayHeaderFooter: true,
  margin: {
    top: '20px',
    right: '20px',
    bottom: '20px',
    left: '20px'
  },
  headerTemplate: `<div style="font-size: 12px;">Header</div>`,
  footerTemplate: `<div style="font-size: 12px;">Footer</div>`
});

await browser.close();