Laravel中使用Spatie/Browsershot截图时CSS未渲染问题求助

以下是针对你遇到的问题的几个可行修复方案：

• 验证CSS绝对URL的可访问性
  虽然已经将相对URL转为绝对URL，但需确认这些CSS路径能被无头Chrome正常访问。部分网站会设置防盗链或需要特定请求头，可添加自定义请求头模拟正常浏览器请求：

  $browserShot->setExtraHttpHeaders([
      'Referer' => '原网页的完整地址',
      'User-Agent' => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'
  ]);
  

• 调整页面等待逻辑
  waitUntilNetworkIdle()可能在CSS未完全加载渲染时就执行了截图，可替换为等待load事件或增加固定等待时长：

  $browserShot->waitUntil('load') // 等待页面load事件触发
              ->wait(3000); // 额外等待3秒确保样式渲染完成
  

• 禁用无头Chrome缓存
  无头Chrome的缓存可能导致旧资源被加载，添加参数强制禁用缓存：

  $browserShot->setOption('args', [
      '--disable-web-security',
      '--disable-cache',
      '--disk-cache-size=0'
  ]);
  

• 嵌入CSS内容（兜底方案）
  如果外部CSS始终无法加载，可直接将原网页的CSS内容嵌入到HTML的<style>标签中，避免依赖外部请求：
  在生成$html时，抓取外部CSS的内容，替换原<link rel="stylesheet">标签为<style>标签并写入CSS内容。

• 检查版本兼容性
  确保Chrome版本与Puppeteer、Browsershot兼容，旧版本可能存在渲染问题。更新Chrome至最新稳定版，同时更新Browsershot包：

  composer update spatie/browsershot
  

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