返回

用Egg和Puppeteer从 HTML 生成 PDF 的简单方法

前端

借助Egg和Puppeteer将HTML无缝转换为PDF

在当今信息爆炸的数字化时代，拥有将HTML内容便捷转换成PDF格式的能力至关重要。PDF作为一种通用文件格式，可在任何设备上无缝打开，并非常适合打印和归档。

要实现HTML转PDF这一任务，Egg 和Puppeteer 强强联合，为我们提供了一套简单易用的解决方案。

安装及配置

首先，我们需要在你的系统上安装这两个必不可少的库。通过运行以下命令，你可以轻松完成安装：

npm install egg puppeteer

然后，在你的项目中创建一个新的Egg控制器，并添加以下代码：

'use strict';

const Controller = require('egg').Controller;

class PdfController extends Controller {
  async index() {
    const { ctx } = this;
    const html = `<html><body><h1>Hello, world!</h1></body></html>`;
    const pdf = await this.service.pdf.generate(html);
    ctx.attachment('hello.pdf');
    ctx.set('Content-Type', 'application/pdf');
    ctx.body = pdf;
  }
}

module.exports = PdfController;

将HTML转换为PDF

通过上述配置，我们现在可以利用Puppeteer的强大功能将HTML转换为PDF。Puppeteer是一个无头Chromium浏览器，它允许我们与Chrome或Chromium浏览器进行无头交互，生成PDF文件。

要生成PDF，我们需要获取HTML内容，然后使用Puppeteer创建一个新的PDF页面。可以通过以下方式实现：

const html = '<html><body><h1>Hello, world!</h1></body></html>';
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent(html);
const pdfBuffer = await page.pdf();
await browser.close();

发送PDF响应

转换完成后，我们需要将生成的PDF文件发送回客户端。为此，我们可以使用Egg的响应API：

ctx.attachment('hello.pdf');
ctx.set('Content-Type', 'application/pdf');
ctx.body = pdfBuffer;

现在，每当访问/pdf路由时，我们的应用程序将自动将HTML内容转换为PDF，并在浏览器中下载为hello.pdf文件。

常见问题解答

1. 如何生成带有多页的PDF？

只需使用page.addPage()方法在Puppeteer中添加新页面即可。

2. 如何设置PDF页面大小和页边距？

在page.pdf()方法中指定format和margin选项即可。

3. 如何使用模板引擎动态生成HTML？

可以使用Egg的视图引擎（例如Nunjucks）来动态生成HTML内容。

4. 如何将CSS样式应用于HTML内容？

在调用page.setContent()方法时，将CSS样式表作为第二个参数传递即可。

5. 如何在PDF中嵌入图像？

使用page.evaluate()方法将图像加载到页面中，然后使用page.pdf()方法中的scale选项调整图像大小。

结论

结合Egg和Puppeteer的强大功能，我们可以轻松地将HTML内容转换为PDF格式。这种方法灵活且易于实施，满足各种转换需求。拥抱这一解决方案，为你的应用程序增添无缝的HTML转PDF功能。