Google Charts相对URL致PDF导出图表不显示问题求助

我确实碰到过不少开发者遇到这个情况！问题的核心在于Google Charts生成的图表资源使用了协议相对URL（比如//chart.googleapis.com），这种URL在浏览器环境下会自动适配当前页面的协议（HTTP或HTTPS），但在PHP应用导出PDF的场景中，很多PDF渲染工具不会自动补全缺失的协议头，导致无法正确加载图表资源，最终出现图表不显示的情况。

问题复现代码示例 #

以下是能复现该问题的代码片段：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['imagesparkline']});
</script>
<div id="chart_div"></div>
<script>
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Revenue', 'Licenses'],
      [435, 132], [438, 131], [512, 137], [460, 142],
      [491, 140], [487, 139], [552, 147], [511, 146],
      [505, 151], [509, 149]
    ]);
    var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div'));
    chart.draw(data, {
      width: 120, height: 40,
      showAxisLines: false, showValueLabels: false, labelPosition: 'left'
    });
  }
</script>

解决方案 #

最直接有效的办法就是在PDF导出前，将页面中的协议相对URL替换为完整的HTTPS绝对URL。你可以在PHP中通过字符串替换实现：

$html = str_replace('src="//chart.googleapis.com', 'src="https://chart.googleapis.com', $html);

这段代码会把所有指向Google Charts的协议相对资源链接替换成HTTPS开头的完整URL，确保PDF渲染工具能正确定位到图表资源。

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