使用Puppeteer生成PDF时本地文件相对链接无法点击的问题

问题出在你直接用page.setContent传入HTML内容时，页面默认基础URL是about:blank，这会导致相对链接./linktofile.pdf被解析为about:blank/linktofile.pdf，无法指向同目录的本地文件。而Word生成PDF时，会基于文件所在目录作为基础路径处理相对链接，所以能正常工作。

要解决这个问题，你需要给页面设置正确的基础URL，让相对链接基于输出PDF所在的目录解析。具体修改如下：

1. 使用Node.js的path模块获取输出文件所在的绝对目录路径
2. 将该目录路径转换为file://协议的URL，作为页面的baseURL
3. 在调用page.setContent时传入这个baseURL参数

修改后的代码：

import puppeteer from 'puppeteer';
import path from 'path';

export async function genPdf(outputFile: string) {
    // 获取输出文件所在目录的绝对路径，转换为file协议URL
    const outputDir = path.dirname(path.resolve(outputFile));
    const baseURL = `file://${outputDir}/`;

    const htmlContent = `
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
        </head>
        <body>
            <p><a href="./linktofile.pdf">open pdf file</a></p>
        </body>
        </html>
    `;

    const browser = await puppeteer.launch({ headless: "new" });
    const page = await browser.newPage();
    
    // 传入baseURL，让相对链接基于输出目录解析
    await page.setContent(htmlContent, { baseURL });

    await page.pdf({
        path: outputFile,
        format: 'A4',
    });

    await browser.close();
}

修改后，生成的PDF中的链接会被正确解析为同目录下的linktofile.pdf，在支持本地文件链接的PDF阅读器中即可正常打开目标文件。

注意：部分PDF阅读器出于安全限制可能会阻止打开本地文件链接，遇到这种情况需在阅读器设置中启用相关权限（与Word生成PDF的处理逻辑一致）。

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