Angular 9中使用Puppeteer生成PDF遇PUPPETEER_PRODUCT未定义错误

你已经搞定了前端运行Puppeteer的几个基础依赖问题，但这个PUPPETEER_PRODUCT的报错本质上是因为Puppeteer是为Node.js环境设计的，没法直接在浏览器端（Angular前端）运行。它的内部逻辑依赖Node.js核心模块、文件系统访问权限，还要启动本地浏览器实例，这些在浏览器的沙箱环境里都是不被支持的。

下面给你两种可行的解决方案，优先推荐第一种：

方案1：将Puppeteer逻辑迁移到后端（最稳妥） #

最合理的做法是把PDF生成的代码放到Node.js后端服务里，前端通过调用API接口触发PDF生成并下载。

步骤1：搭建后端接口（以Express为例） #

先在后端项目里安装依赖：

npm install express puppeteer cors

然后写一个生成PDF的接口：

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

app.use(cors());
app.use(express.json());

app.post('/generate-pdf', async (req, res) => {
  try {
    const { url } = req.body;
    // Puppeteer v19+推荐使用'new'模式的无头浏览器
    const browser = await puppeteer.launch({ headless: 'new' });
    const page = await browser.newPage();
    // 等待页面资源加载完成再生成PDF
    await page.goto(url, { waitUntil: 'networkidle2' });
    const pdfBuffer = await page.pdf({ format: 'A4' });
    
    await browser.close();
    
    // 设置响应头，让浏览器触发下载
    res.setHeader('Content-Type', 'application/pdf');
    res.setHeader('Content-Disposition', 'attachment; filename="medium.pdf"');
    res.send(pdfBuffer);
  } catch (error) {
    console.error('PDF生成失败:', error);
    res.status(500).send('生成PDF时出错');
  }
});

app.listen(3000, () => {
  console.log('PDF生成服务运行在http://localhost:3000');
});

步骤2：修改Angular前端代码 #

把原来的exportPdf函数改成调用后端接口：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class ExportPdfService {
  constructor(private http: HttpClient) {}

  exportPdf() {
    const currentUrl = window.location.href;
    this.http.post('http://localhost:3000/generate-pdf', { url: currentUrl }, { responseType: 'blob' })
      .subscribe(blob => {
        // 创建临时下载链接并触发下载
        const downloadUrl = window.URL.createObjectURL(blob);
        const aTag = document.createElement('a');
        aTag.href = downloadUrl;
        aTag.download = 'medium.pdf';
        aTag.click();
        // 释放临时URL资源
        window.URL.revokeObjectURL(downloadUrl);
      });
  }
}

记得在组件里注入这个服务，并且确保Angular项目已经导入HttpClientModule。

方案2：前端替代方案（适合简单场景，不推荐复杂页面） #

如果一定要在前端实现PDF生成，可以放弃Puppeteer，改用专门为浏览器设计的PDF生成库，比如：

• jsPDF + html2canvas：把HTML转成图片再生成PDF（适合布局简单的页面）
• pdfmake：通过定义文档结构生成PDF（适合结构化内容）

这里给你jsPDF+html2canvas的示例：
先安装依赖：

npm install jspdf html2canvas

然后在组件里实现：

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

exportPdf() {
  // 可以指定要转换的特定DOM元素，比如document.getElementById('pdf-content')
  const targetElement = document.body;
  html2canvas(targetElement).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF('p', 'mm', 'a4');
    const imgWidth = 210;
    const pageHeight = 297;
    const imgHeight = canvas.height * imgWidth / canvas.width;
    let remainingHeight = imgHeight;
    let position = 0;

    // 添加第一页
    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    remainingHeight -= pageHeight;

    // 处理长内容分页
    while (remainingHeight >= 0) {
      position = remainingHeight - imgHeight;
      pdf.addPage();
      pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      remainingHeight -= pageHeight;
    }

    pdf.save('medium.pdf');
  });
}

这个方案的缺点是对复杂HTML（比如CSS动画、高级布局）的支持不如Puppeteer，但胜在完全在前端运行，不需要后端服务。

总的来说，Puppeteer本身就不适合在浏览器端运行，后端方案能充分发挥它的能力，也能避免前端环境的各种兼容性坑。

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