Laravel Blade中Google折线图无法在PDF中显示的问题求助

绝大多数PDF生成工具（如dompdf、wkhtmltopdf）仅解析静态HTML/CSS，不会执行客户端JavaScript。而Google Charts是依赖浏览器JS引擎动态渲染图表的，所以直接在Blade中编写JS生成图表的代码，PDF工具无法捕获到渲染后的图形，自然显示不出来。

方案1：服务器端生成图表图片，嵌入PDF #

绕过客户端JS渲染，直接在服务器端生成图表图片，再用<img>标签引入到Blade中，PDF工具可以直接解析图片内容。

示例：使用Google Image Charts API #

该API可以通过构造URL直接生成静态图表图片，无需JS：

@php
    // 整理数据格式：将每个数据点的数值和标签分别收集
    $dataValues = [];
    $locationLabels = [];
    foreach ($last as $l) {
        $dataValues[] = $l->pointer;
        $locationLabels[] = $l->location;
    }
    // 构造图表URL
    $chartUrl = sprintf(
        'https://chart.googleapis.com/chart?cht=lc&chtt=testing+chart&chs=600x300&chd=t:%s&chl=%s',
        implode(',', $dataValues),
        implode('|', $locationLabels)
    );
@endphp

<!-- 在页面中嵌入图表图片 -->
<img src="{{ $chartUrl }}" alt="测试折线图" style="width: 100%;">

参数说明 #

• cht=lc：指定生成折线图
• chs=600x300：设置图表宽高
• chd=t:：后面跟逗号分隔的数值数据
• chl=：后面跟|分隔的标签文本

方案2：使用支持JS渲染的PDF工具 #

如果需要保留Google Charts的渲染效果，可使用基于Headless Chrome的spatie/browsershot，它会模拟浏览器执行JS渲染图表后再生成PDF。

操作步骤： #

1. 安装依赖包

composer require spatie/browsershot

2. 确保服务器已安装Chrome或Chromium浏览器
3. 在控制器中生成PDF

use Spatie\Browsershot\Browsershot;
use Illuminate\Support\Facades\Response;

public function exportChartPdf()
{
    // 获取业务数据
    $last = YourDataModel::latest()->get();
    // 渲染包含图表的Blade视图
    $html = view('your-chart-blade-file', compact('last'))->render();
    
    // 生成PDF：启用JS并设置延迟确保图表渲染完成
    $pdfStoragePath = storage_path('app/public/chart_result.pdf');
    Browsershot::html($html)
        ->enableJavaScript()
        ->setJavaScriptDelay(1500) // 延迟1.5秒等待图表渲染
        ->save($pdfStoragePath);
    
    // 返回PDF下载响应，下载后自动删除文件
    return Response::download($pdfStoragePath)->deleteFileAfterSend();
}

4. 修正原Blade的JS数据格式问题
   原代码中pointer被包裹为字符串，Google Charts需要数值类型，修改循环部分：

@php
    foreach ($last as $l) {
        echo "['{$l->location}', {$l->pointer}],";
    }
@endphp

• 若使用dompdf，它对CSS和HTML的支持有限，静态图片建议使用内联样式
• Google Image Charts API已标记为弃用，但目前仍可正常使用；若追求长期稳定，可改用PHP本地图表库（如JpGraph、ChartPHP）

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