如何在Laravel Blade中渲染可执行JavaScript的HTML内容？

以下是几种可行的解决方案：

1. 使用无头浏览器（最通用的方案） #

前端动态渲染的内容需要浏览器环境执行JS才能生成，用无头浏览器可以模拟真实浏览器加载页面、执行JS，然后抓取完整渲染后的HTML。

实现步骤： #

• 先安装Node.js及无头浏览器工具（比如Puppeteer）：

  npm install puppeteer
  

• 编写Node脚本实现页面抓取：

  const puppeteer = require('puppeteer');
  
  (async () => {
    const browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] }); // 服务器环境可能需要加这些参数
    const page = await browser.newPage();
    await page.goto('http://your-app-domain/report', { waitUntil: 'networkidle2' }); // 等待网络空闲，确保JS执行完成
    const fullHtml = await page.content();
    console.log(fullHtml);
    await browser.close();
  })();
  

• 在Laravel中调用该脚本获取结果：

  $fullRenderedHtml = shell_exec('node /path/to/your/script.js');
  // 后续可对$fullRenderedHtml进行存储或返回处理
  

• 注意：服务器需要安装Chrome/Chromium环境，Ubuntu系统可通过apt install chromium-browser安装。

2. 迁移渲染逻辑到后端 #

如果JS渲染的内容是基于接口数据生成的，可以把这部分渲染逻辑移到Laravel后端，直接用Blade模板生成DOM：

• 在控制器中获取渲染所需的数据源：

  public function report()
  {
      $reportData = Report::all(); // 示例：从数据库获取数据
      return view('report', compact('reportData'));
  }
  

• 在report.blade.php中直接用Blade语法生成DOM：

  <div id="report">
      <table>
          @foreach($reportData as $item)
              <tr><td>{{ $item->name }}</td></tr>
          @endforeach
      </table>
  </div>
  

这样调用view('report')->render()就能直接拿到完整的HTML，无需依赖前端JS渲染。

3. 使用Laravel封装的无头浏览器工具 #

可以用spatie/browsershot包，它封装了Puppeteer，直接用PHP代码就能实现抓取：

• 安装包：

  composer require spatie/browsershot
  

• 在代码中使用：

  use Spatie\Browsershot\Browsershot;
  
  $fullHtml = Browsershot::url('http://your-app-domain/report')
      ->waitUntilNetworkIdle()
      ->html();
  

这个包会自动处理Puppeteer的依赖安装，同样需要服务器具备Node.js和Chrome环境。

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