使用Puppeteer生成PDF时图片无法显示，求助排查方案

你遇到的问题核心是本地相对路径的图片无法被Puppeteer正确解析加载，加上部分配置顺序和权限问题导致资源加载失败，以下是具体修复方案：

1. 为page.setContent指定baseURL #

当直接传入HTML字符串时，浏览器没有上下文来识别相对路径的根目录，必须通过baseURL参数指定本地文件的根路径，让浏览器能定位到图片资源：

修改page.setContent代码（需先引入path模块）：

const path = require('path');

// ...其他代码
await page.setContent(content, {
  waitUntil: "networkidle0",
  // 指定当前脚本所在目录为基准路径
  baseURL: `file://${path.resolve(__dirname)}/`
});

2. 调整emulateMediaType的执行顺序 #

emulateMediaType('print')需在设置页面内容之前执行，避免print模式下的样式规则干扰资源加载逻辑：

await page.emulateMediaType('print');
await page.setContent(content, { 
  waitUntil: "networkidle0",
  baseURL: `file://${path.resolve(__dirname)}/`
});

3. 启动Chrome时添加本地文件访问权限 #

若图片是本地文件，需给Puppeteer启动的Chrome添加--allow-file-access-from-files参数，解除本地资源加载限制：

const browser = await puppeteer.launch({
  executablePath: 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
  args: ['--allow-file-access-from-files']
});

4. 验证图片路径正确性 #

确保logo_head.png与index.js脚本在同一目录下，也可直接使用绝对路径替换HTML中的src：

<img src="file:///C:/你的项目路径/logo_head.png" class="logo">

修改后的完整index.js示例 #

const puppeteer = require('puppeteer');
const path = require('path');

(async function() {
    try{
        const browser = await puppeteer.launch({
            executablePath: 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
            args: ['--allow-file-access-from-files']
        });
 
        const page = await browser.newPage()
        await page.emulateMediaType('print');
        
        const content = await compile('index',data) 
 
        await page.setContent(content,{ 
            waitUntil: "networkidle0",
            baseURL: `file://${path.resolve(__dirname)}/`
        });
        
        await page.pdf({
            path:'output2.pdf',
            displayHeaderFooter: true,
        })
 
        console.log("done creating pdf")
 
        await browser.close()
        process.exit()
 
    }catch(e){
        console.log(e)
    }
})()

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