如何在HighChart中使用getSVG()导出PDF时去除文本阴影

方案1：从HighCharts配置源头禁用文本描边 #

直接在图表的文本元素（如数据标签）配置中关闭描边和文本阴影，从源头避免生成带问题样式的SVG：

// Angular中HighCharts的配置示例
this.chartOptions = {
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        style: {
          stroke: 'none', // 禁用描边
          strokeWidth: 0,
          textShadow: 'none' // 移除文本阴影
        }
      }
    }
  },
  // 其他图表配置...
};

方案2：全面替换SVG字符串中的问题样式 #

如果无法修改HighCharts配置，优化SVG字符串的替换逻辑，覆盖所有可能的描边样式定义：

// 获取SVG并处理
const svgStr = this.chart.getSVG();
const processedSvg = svgStr
  // 替换内联style中的描边设置
  .replace(/stroke:\s*[^;]+;/g, 'stroke:none;')
  .replace(/stroke-width:\s*\d+(\.\d+)?;/g, 'stroke-width:0;')
  // 替换元素属性中的描边设置
  .replace(/stroke="[^"]+"/g, 'stroke="none"')
  .replace(/stroke-width="\d+(\.\d+)?"/g, 'stroke-width="0"');

方案3：调整pdfMake的SVG渲染配置 #

在pdfMake中添加SVG的渲染参数，强制覆盖文本样式：

// 生成PDF的代码
pdfMake.createPdf({
  content: [
    {
      svg: processedSvg,
      width: 600, // 适配PDF宽度
      style: {
        textShadow: 'none',
        stroke: 'none',
        strokeWidth: 0
      }
    }
  ]
}).download('chart.pdf');

说明 #

之前的replace未生效，大概率是因为只覆盖了部分样式定义（比如只处理了内联style，没处理元素属性），或者正则表达式匹配范围不足。上述方案通过多维度覆盖，能彻底清除导致阴影的描边和文本阴影样式。

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