将 HTML 无缝转换为 PDF 和图像：Puppeteer 的指南

2024-01-25 00:24:00

Puppeteer 探索：从 HTML 到 PDF 和图像的无缝转换

导言

前端开发中经常遇到需要将当前页面转换为图像或 PDF 的情况。Puppeteer，一个功能强大的 Node.js 库，应运而生，提供了一种便捷、高效的方法来完成此任务。本文将深入探讨 Puppeteer 的工作原理，重点介绍它如何将 HTML 无缝转换为 PDF 和图像。

Puppeteer：概述

Puppeteer 是一个由 Google 维护的 Node.js 库，用于自动化 Chrome 浏览器的行为。它允许开发人员通过编写脚本与浏览器交互，执行各种任务，包括：

导航网页
填写表单
捕获屏幕截图
生成 PDF 文件

将 HTML 转换为 PDF

使用 Puppeteer 将 HTML 转换为 PDF 的过程涉及以下步骤：

实例化一个 Puppeteer 浏览器： 创建一个新实例，代表 Chrome 浏览器。
导航到目标页面： 使用 goto() 方法导航到要转换为 PDF 的 HTML 页面。
生成 PDF： 调用 pdf() 方法生成 PDF 文件。此方法允许自定义 PDF 文件的页面大小、页边距和其他选项。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  const pdf = await page.pdf({ format: 'A4' });

  // 保存 PDF 文件
  await pdf.save('my-pdf.pdf');

  await browser.close();
})();

将 HTML 转换为图像

类似地，Puppeteer 可以轻松地将 HTML 转换为图像：

实例化一个 Puppeteer 浏览器： 与上文相同，创建一个新实例来代表 Chrome 浏览器。
导航到目标页面： 导航到要转换为图像的 HTML 页面。
捕获屏幕截图： 调用 screenshot() 方法捕获页面屏幕截图。此方法允许自定义图像格式（例如 PNG、JPEG）和尺寸。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  const screenshot = await page.screenshot({ path: 'my-screenshot.png' });

  await browser.close();
})();