含link标签时用Puppeteer生成PDF样式丢失问题求助

我搭建了一个供学生使用富文本编辑器创建复杂笔记的网站，想给用户加「下载为PDF」功能，用Puppeteer实现。测试跳转至网站特定页面生成PDF时效果很好，但不想跳转页面，只传入包含笔记的div#notes的HTML内容时，样式全丢，PDF效果极差。

技术栈是NextJS+Tailwind，很多样式通过link标签引入，推测是Puppeteer的新页面无法识别这些相对路径的样式文件导致的问题。当前实现代码：

async generatePdfFromHtml(user: UserEntity, data: InputGetPdfDto) {
    const browser = await puppeteer.launch({ executablePath: puppeteer.executablePath('chrome') });
    const page = await browser.newPage();
    const html = data.html; // 仅为div#notes的outerHTML
    await page.setContent(html, { waitUntil: 'networkidle2' });

    console.log(html);

    const fileName = `element-${Date.now()}.pdf`;
    const filePath = path.join('output', fileName);

    await page.pdf({
      path: filePath,
      format: 'A4',
      printBackground: true,
      timeout: 0,
    });

    await browser.close();

    return filePath;
  }

网站HTML结构补充：

<html lang="en" class="dark" style="color-scheme: dark;">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="/_next/static/css/app/layout.css?v=1717793996045" data-precedence="next_static/css/app/layout.css">
      <!-- 其他内容 -->
   </head>
   <!-- 页面内容，包含div#notes -->
</html>

需求：点击「下载为PDF」按钮，将div#notes转换为PDF并保留所有原有样式。

方法1：构建完整HTML文档，引入必要样式资源 #

Puppeteer的新页面是独立环境，仅传入div的HTML会缺失head中的样式、meta等关键内容。需要构建完整的HTML结构，整合原网站的样式资源和目标div内容。

实现步骤 #

• 从原页面提取完整的head配置（meta标签、样式link等）
• 将div#notes的内容嵌入到完整HTML结构中
• 使用绝对路径引入样式文件，确保Puppeteer能访问到

修改后代码示例 #

async generatePdfFromHtml(user: UserEntity, data: InputGetPdfDto) {
    const browser = await puppeteer.launch({ executablePath: puppeteer.executablePath('chrome') });
    const page = await browser.newPage();
    
    // 构建包含完整样式的HTML文档
    const fullHtml = `
    <html lang="en" class="dark" style="color-scheme: dark;">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 使用网站绝对路径引入样式文件 -->
        <link rel="stylesheet" href="${process.env.NEXT_PUBLIC_BASE_URL}/_next/static/css/app/layout.css?v=1717793996045" data-precedence="next_static/css/app/layout.css">
        <!-- 补充其他必要的样式文件引入 -->
      </head>
      <body>
        ${data.html} <!-- 插入div#notes的outerHTML -->
      </body>
    </html>
    `;

    await page.setContent(fullHtml, { 
      waitUntil: 'networkidle2',
      timeout: 0 // 确保样式文件完全加载
    });

    const fileName = `element-${Date.now()}.pdf`;
    const filePath = path.join('output', fileName);

    await page.pdf({
      path: filePath,
      format: 'A4',
      printBackground: true,
      timeout: 0,
    });

    await browser.close();

    return filePath;
  }

注意：process.env.NEXT_PUBLIC_BASE_URL需配置为你的网站根域名（如https://your-notes-site.com），避免使用相对路径导致样式加载失败。

方法2：内联所有样式到HTML中 #

如果担心样式文件的URL不可访问（如本地开发、动态版本号问题），可以直接将CSS内容内联到HTML的<style>标签中，无需加载外部资源。

实现步骤 #

• 在后端读取本地CSS文件的内容
• 将CSS内容嵌入到HTML的<style>标签内
• 组合完整HTML后传给Puppeteer

修改后代码示例 #

import fs from 'fs';

async generatePdfFromHtml(user: UserEntity, data: InputGetPdfDto) {
    const browser = await puppeteer.launch({ executablePath: puppeteer.executablePath('chrome') });
    const page = await browser.newPage();

    // 读取本地CSS文件（路径需匹配NextJS静态资源目录）
    const cssPath = path.join(process.cwd(), '.next', 'static', 'css', 'app', 'layout.css');
    const cssContent = fs.readFileSync(cssPath, 'utf8');
    
    const fullHtml = `
    <html lang="en" class="dark" style="color-scheme: dark;">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>${cssContent}</style>
        <!-- 内联其他必要的CSS文件内容 -->
      </head>
      <body>
        ${data.html}
      </body>
    </html>
    `;

    await page.setContent(fullHtml, { waitUntil: 'networkidle2' });

    const fileName = `element-${Date.now()}.pdf`;
    const filePath = path.join('output', fileName);

    await page.pdf({
      path: filePath,
      format: 'A4',
      printBackground: true,
      timeout: 0,
    });

    await browser.close();

    return filePath;
  }

注意：若CSS文件带有版本号，需确保读取的是对应版本的文件，可在构建阶段处理版本号映射问题。

方法3：跳转至目标页面并隐藏无关元素 #

如果不想构建HTML，可直接跳转到笔记详情页，通过Puppeteer隐藏除div#notes外的所有元素，再生成PDF。这种方式完全复用原页面样式，无需处理样式引入问题。

代码示例 #

async generatePdfFromNotePage(user: UserEntity, noteId: string) {
    const browser = await puppeteer.launch({ executablePath: puppeteer.executablePath('chrome') });
    const page = await browser.newPage();

    // 跳转到笔记详情页
    await page.goto(`${process.env.NEXT_PUBLIC_BASE_URL}/notes/${noteId}`, { 
      waitUntil: 'networkidle2',
      timeout: 0
    });

    // 隐藏非笔记区域的所有元素
    await page.evaluate(() => {
      document.body.querySelectorAll('*:not(#notes, #notes *)').forEach(el => {
        (el as HTMLElement).style.display = 'none';
      });
      // 调整body样式，确保笔记内容适配PDF页面
      document.body.style.margin = '0';
      document.body.style.padding = '20px';
    });

    const fileName = `note-${noteId}-${Date.now()}.pdf`;
    const filePath = path.join('output', fileName);

    await page.pdf({
      path: filePath,
      format: 'A4',
      printBackground: true,
      timeout: 0,
    });

    await browser.close();

    return filePath;
  }

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