我之前也踩过dompdf的这个坑——它确实不支持JavaScript渲染，所以要生成带动态图表的PDF，得换个思路。下面几个方案都是我实际项目中用过的，靠谱程度拉满：

方案一：用无头浏览器渲染页面转PDF（最推荐） #

dompdf不行，但无头浏览器能完整执行JS并渲染页面，完美适配ChartJS/Morris.js这类前端图表库。Laravel生态里有两个成熟的包可以用：

1. 使用 barryvdh/laravel-snappy（基于wkhtmltopdf） #

这是dompdf作者维护的另一个包，依赖wkhtmltopdf工具，能把HTML页面（包括JS渲染的内容）转成PDF。步骤如下：

• 安装包：

  composer require barryvdh/laravel-snappy
  

• 安装wkhtmltopdf：根据你的服务器系统来，比如Ubuntu用apt-get install wkhtmltopdf，Mac用brew install wkhtmltopdf
• 配置路径：发布配置文件后，在config/snappy.php里设置binary为wkhtmltopdf的实际路径
• 控制器里生成PDF：

  use Barryvdh\Snappy\Facades\SnappyPdf;
  
  public function generatePdf()
  {
      // 加载包含ChartJS代码的Blade视图
      $html = view('charts.report')->render();
      // 生成PDF并返回
      return SnappyPdf::loadHTML($html)->download('report.pdf');
  }
  

  这样生成的PDF里，ChartJS的图表会被完整渲染出来，和你在浏览器里看到的一模一样。

2. 使用 spatie/browsershot（基于Chrome无头浏览器） #

如果wkhtmltopdf对某些复杂CSS/JS支持不好，试试这个——它调用Chrome无头浏览器来渲染页面，兼容性更强。步骤类似：

• 安装包：

  composer require spatie/browsershot
  

• 确保服务器安装了Chrome或Chromium
• 控制器示例：

  use Spatie\Browsershot\Browsershot;
  
  public function generatePdf()
  {
      $html = view('charts.report')->render();
      // 生成PDF文件，或者直接返回下载
      Browsershot::html($html)->save(storage_path('app/public/report.pdf'));
      return response()->download(storage_path('app/public/report.pdf'));
  }
  

方案二：把图表转为图片插入PDF #

如果不想依赖外部工具，可以先让ChartJS把图表生成图片，再插入到PDF里。这个方法更轻量，适合简单图表：

• 在Blade视图里正常初始化ChartJS，然后添加JS代码获取图表的base64图片：

  // 初始化图表
  const ctx = document.getElementById('myChart').getContext('2d');
  const myChart = new Chart(ctx, {
      type: 'bar',
      data: { /* 你的数据 */ },
      options: { /* 配置 */ }
  });
  
  // 确保图表渲染完成后获取base64图片
  setTimeout(() => {
      const chartImage = myChart.toBase64Image();
      // 可以把这个图片数据传给后端，或者直接在页面里插入隐藏的img标签
      document.getElementById('chart-image').src = chartImage;
  }, 1000); // 延迟时间根据图表复杂度调整
  

• 在Blade里添加一个用于渲染的img标签：

  <img id="chart-image" style="display:block; width:100%;" />
  

• 后端用dompdf生成PDF时，渲染这个视图即可——dompdf能正常解析base64格式的图片，不需要额外配置。

注意事项 #

• 用无头浏览器时，要确保服务器有足够的资源，渲染复杂页面可能会比dompdf慢一点，但效果是最好的
• 转图片的方法要注意延迟时间，确保图表完全渲染后再获取图片数据
• 如果用Morris.js，思路和ChartJS一致，它也有类似的导出图片的方法（比如morrisInstance.toImg()）

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