Drupal8如何获取视图区块HTML内容 实现Google Charts导出mPDF文件

方案1：前端采集渲染结果后传给后端（推荐，适配用户主动导出场景） #

Google Charts是客户端JS渲染的组件，后端直接请求视图只能拿到初始化JS代码，拿不到最终渲染的图表结构，所以最稳妥的方式是等前端渲染完成后采集内容回传：

• 在视图页面的自定义JS中绑定Google Charts的ready事件，保证图表完全渲染完成后再采集内容
• 前端采集代码示例：

// 替换为你的实际图表容器ID
const chartContainer = document.getElementById('your-chart-container');
// 监听图表渲染完成事件
google.visualization.events.addListener(yourChartInstance, 'ready', function () {
  // 获取容器完整HTML（包含渲染好的SVG结构）
  const chartFullHtml = chartContainer.outerHTML;
  // 编码后传给Drupal后端导出接口，注意携带Drupal CSRF Token避免校验失败
  fetch('/api/export/chart-pdf', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'X-CSRF-Token': drupalSettings.csrfToken
    },
    body: `chart_html=${encodeURIComponent(chartFullHtml)}`
  });
});

• 后端PHP接收处理逻辑：

// 接收参数后先做XSS过滤，放行SVG相关标签避免图表结构被清理
$chartHtml = \Drupal\Component\Utility\Xss::filter(
  $_POST['chart_html'],
  ['div', 'svg', 'g', 'path', 'rect', 'circle', 'text', 'tspan', 'style']
);
// 直接传给mPDF渲染即可
$mpdf = new \Mpdf\Mpdf();
$mpdf->WriteHTML($chartHtml);
$mpdf->Output('statistic-chart.pdf', 'D');

方案2：后端直接渲染提取（适配自动定时导出等无用户操作场景） #

如果不需要用户触发导出，可通过无头浏览器模拟前端渲染过程直接拿最终HTML：

1. 先通过Drupal视图API拿到视图的原始渲染输出（包含Google Charts初始化JS）

// 替换为你实际的视图ID和展示ID
$view = \Drupal\views\Views::getView('statistic_chart_view');
$view->setDisplay('page_1');
$view->execute();
$renderArray = $view->buildRenderable();
$viewRawHtml = (string) \Drupal::service('renderer')->renderRoot($renderArray);

2. 用无头浏览器工具执行JS渲染后提取最终HTML，示例使用spatie/browsershot（基于Puppeteer封装的PHP工具）：

// 执行渲染提取完整HTML
$finalChartHtml = \Spatie\Browsershot\Browsershot::html($viewRawHtml)
  ->waitUntil('networkIdle')
  ->bodyHtml();
// 后续直接传入mPDF即可

注意：mPDF对部分高级SVG样式支持有限，导出前建议把图表相关的CSS样式全部内联到HTML结构中，避免导出后样式丢失。

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