Highcharts导出PDF时async选项被禁用导致图表无法正常导出问题咨询

核心故障原因 #

The async option has been disabled报错源于Highcharts已全面废弃导出模块的async配置，你当前使用的XDomainRequest是仅适配IE8/IE9的老旧跨域请求API，已不被当前Highcharts导出服务兼容，才会出现PDF仅显示占位图、移除async后div插入异常内容的问题。

修复步骤 #

• 第一步：删除所有旧配置中的async: true相关参数，同时完全弃用XDomainRequest的导出请求逻辑，改用以下两种官方兼容方案。
• 第二步：服务端转发导出（推荐，适配多场景）
  前端直接从图表实例获取SVG内容，提交到你的PHP后端，由后端转发请求到Highcharts导出服务，避免前端跨域问题：
  前端示例代码：

  // 获取当前图表的SVG内容
  const chartSvg = yourChartInstance.getSVG();
  // 提交给本地PHP接口
  $.post("/php-export-handler.php", {
    svg: chartSvg,
    exportType: "application/pdf",
    fileName: "custom-chart"
  }, function(res) {
    // 接收后端返回的PDF地址，触发下载
    const link = document.createElement("a");
    link.href = res.fileUrl;
    link.download = "chart.pdf";
    link.click();
  });
  

  PHP后端示例代码：

  <?php
  $postData = [
      'svg' => $_POST['svg'],
      'type' => $_POST['exportType'],
      'filename' => $_POST['fileName']
  ];
  $curl = curl_init('https://exports.highcharts.com/v1/export');
  curl_setopt($curl, CURLOPT_POST, true);
  curl_setopt($curl, CURLOPT_POSTFIELDS, $postData);
  curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
  $pdfContent = curl_exec($curl);
  curl_close($curl);
  
  // 直接输出PDF供前端下载
  header('Content-Type: application/pdf');
  header('Content-Disposition: attachment; filename="'.$_POST['fileName'].'.pdf"');
  echo $pdfContent;
  ?>
  

• 第三步：纯前端导出（轻量场景适用）
  直接引入Highcharts官方客户端导出模块，不需要调用在线导出服务，无需处理跨域问题：

  // 引入导出模块后直接调用原生方法导出
  yourChartInstance.exportChart({
    type: "application/pdf",
    filename: "chart-export"
  });
  

异常问题排查 #

• 移除async配置后div插入异常内容：是旧的XDomainRequest请求返回的非图片内容被直接插入到了DOM容器中，删除所有旧的导出请求逻辑和对应的DOM插入操作即可解决。
• PDF仅显示替代图片：是旧的async接口请求失败未获取到正确的图表资源，切换为上述两种方案后即可正常生成图表内容。

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