如何使用Playwright从Chrome PDF预览中下载PDF文件

开发者阿泽

2026-6-23

解决方案

方法一：拦截网络请求直接获取PDF（推荐）

点击按钮触发弹窗时，弹窗本质是请求了PDF文件的URL。直接拦截这个请求并提取响应内容，无需依赖浏览器PDF阅读器，在任何headless模式下都能生效。

代码示例：

// 提前监听PDF文件的响应
const pdfResponsePromise = page.waitForResponse(response => 
  response.url().includes('.pdf') && response.ok()
);

// 触发弹窗操作
await frame.click('#imbImprimir');

// 获取PDF的buffer
const pdfResponse = await pdfResponsePromise;
const pdfBuffer = await pdfResponse.body();

// 可选：将buffer保存为本地文件
require('fs').writeFileSync('./output.pdf', pdfBuffer);

方法二：模拟PDF阅读器的下载操作

如果必须通过弹窗里的下载箭头实现，需要注意Playwright默认的headless: true是新无头模式（new headless），不会渲染PDF阅读器的UI元素，需切换为传统无头模式（headless: 'chrome'），再定位并点击下载按钮。

代码示例：

// 启动浏览器时指定传统无头模式
const browser = await chromium.launch({
  headless: 'chrome',
});

// 捕获弹窗
const [popup] = await Promise.all([
  page.waitForEvent('popup', { timeout: 20000 }),
  frame.click('#imbImprimir'),
]);

// 等待PDF阅读器的下载按钮加载完成（Chrome的PDF阅读器下载按钮选择器为#download）
await popup.waitForSelector('#download', { timeout: 20000 });

// 触发下载并保存
const download = await popup.waitForEvent('download');
await popup.click('#download');
await download.saveAs('./downloaded.pdf');