Puppeteer中加载外部CSS文件失败问题求助

针对你遇到的问题，这里有几个可行的解决办法：

• 本地引用CSS文件
  把外部的custom-theme.css下载到你的项目目录里，然后修改页面中的link标签，指向本地文件路径，比如：

  <link rel="stylesheet" type="text/css" href="./custom-theme.css">
  

  这样跳过网络加载流程，避免触发导致异常的ProgressEvent。

• 拦截并模拟CSS请求响应
  自定义Puppeteer的请求拦截逻辑，拦截目标CSS的网络请求，直接返回空的CSS内容。如果是用PagedJS CLI，可以修改printer.js里的代码，在创建页面后添加请求拦截：

  await page.setRequestInterception(true);
  page.on('request', (request) => {
    if (request.url() === 'https://www.example.com/custom-theme.css') {
      request.respond({
        status: 200,
        contentType: 'text/css',
        body: ''
      });
    } else {
      request.continue();
    }
  });
  

• 强制内联CSS
  直接把custom-theme.css的内容复制到HTML的<style>标签中，彻底移除外部link引用，这样完全避免外部资源加载的相关事件触发。

• 修改PagedJS的渲染异常捕获逻辑
  找到printer.js中调用ExecutionContext.evaluate的代码（也就是报错栈里的Printer.render方法），把evaluate的回调代码用try-catch包裹，捕获ProgressEvent异常并忽略：

  await context.evaluate(async () => {
    try {
      // 原有的渲染逻辑代码
    } catch (e) {
      if (e instanceof ProgressEvent) return;
      throw e;
    }
  });
  

内容的提问来源于stack exchange，提问作者Martin-Mueller