使用Puppeteer下载PDF时Chrome工具栏显示问题求助

你遇到的问题是因为用page.goto打开PDF链接后调用page.pdf()，本质是让Chrome把PDF当作网页渲染后再导出，这会带上Chrome默认的打印页眉页脚（即你看到的工具栏相关内容），而非直接获取原始PDF文件。以下是两种解决方法：

方法1：直接下载原始PDF（推荐） #

既然目标URL是直接的PDF下载链接，无需通过Chrome渲染，直接用HTTP请求获取原始文件即可得到纯净PDF：

const axios = require('axios');

public async downloadPdf() {
    const url = "https://notability.com/n/download/pdf/1_tGACBM45Y8SBARa88w_J/Note%203.%20Oct%202024.pdf";
    const response = await axios.get(url, { responseType: 'arraybuffer' });
    return Buffer.from(response.data);
}

注：若不想依赖axios，也可使用Node.js内置的http/https模块实现文件下载。

方法2：配置page.pdf()参数去除页眉页脚 #

若必须通过Puppeteer生成PDF，需在调用page.pdf()时传入参数关闭默认页眉页脚：

public async downloadPdf() {
    const browser = await puppeteer.launch({
        headless: "new",
        args: ['--no-sandbox', '--disable-setuid-sandbox']
    });
    const url = "https://notability.com/n/download/pdf/1_tGACBM45Y8SBARa88w_J/Note%203.%20Oct%202024.pdf";

    const page = await browser.newPage();
    await page.goto(url, { waitUntil: "networkidle2" });

    const pdf = await page.pdf({
        displayHeaderFooter: false, // 关闭默认页眉页脚
        printBackground: true,
        margin: { top: 0, bottom: 0, left: 0, right: 0 } // 可选：消除留白
    });

    await browser.close();
    return Buffer.from(pdf);
}

核心参数是displayHeaderFooter: false，它会移除Chrome默认添加的包含浏览器信息的页眉页脚；使用新版无头模式headless: "new"可避免旧版的渲染兼容性问题。

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