Angular中用html2pdf导出PDF时Highcharts标签自定义字体不生效

我在Angular应用中使用Highcharts，已通过以下CSS代码成功修改轴标签的字体族：

.highcharts-yaxis-labels, .highcharts-xaxis-labels, .highcharts-root, .mat-form-field {
font-family: "YekanBakh" !important;
}

该设置在浏览器中显示图表时完全正常，但使用html2pdf库生成PDF时，自定义字体族并未应用到生成的PDF中。

生成PDF的代码如下：

public onPrint(): void {
    const content = document.getElementById('print-layout');
    const options = {
        margin: [5, 2, 5, 2],
        filename: 'document.pdf',
        pagebreak: {
            mode: ['avoid-all', 'css'], 
            before: "#nextpage"
        },
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { 
            unit: 'mm', 
            orientation: 'p', 
            format: 'a4', 
            putOnlyUsedFonts: true, 
            compress: true, 
            floatPrecision: 'smart'
        },
    };

    html2pdf()
        .from(content)
        .set(options)
        .save();
}

将图表打印为PDF时，Highcharts标签的YekanBakh字体未被应用，而是默认使用了其他字体，尽管CSS在浏览器中已正确生效。

已做排查：

• 确认字体在浏览器中已正确应用
• 为CSS规则添加!important以确保生效
• 确保Highcharts在屏幕上渲染正常，但PDF输出问题仍存在

解决方案 #

1. 让jsPDF注册并嵌入自定义字体 #

html2pdf依赖的jsPDF需要明确加载自定义字体才能在PDF中渲染，步骤如下：

• 将YekanBakh字体文件（如.ttf）转为base64编码
• 在代码中引入该base64字符串，通过jsPDF的addFont方法注册字体

示例代码修改：

// 假设已将YekanBakh.ttf转为base64字符串并导入
import yekanBakhBase64 from './assets/fonts/yekanbakh-base64.txt';

public onPrint(): void {
    const content = document.getElementById('print-layout');
    // 初始化带字体配置的jsPDF实例
    const pdfInstance = new jspdf.jsPDF({
        unit: 'mm', 
        orientation: 'p', 
        format: 'a4', 
        putOnlyUsedFonts: true, 
        compress: true, 
        floatPrecision: 'smart'
    });
    // 注册字体：参数依次为base64字符串、字体名、字体样式
    pdfInstance.addFont(yekanBakhBase64, 'YekanBakh', 'normal');
    pdfInstance.setFont('YekanBakh');

    const options = {
        margin: [5, 2, 5, 2],
        filename: 'document.pdf',
        pagebreak: {
            mode: ['avoid-all', 'css'], 
            before: "#nextpage"
        },
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { 
            instance: pdfInstance // 使用已注册字体的实例
        },
    };

    html2pdf()
        .from(content)
        .set(options)
        .save();
}

2. 强制Highcharts使用SVG渲染 #

Highcharts默认可能用Canvas渲染图表，html2canvas处理Canvas内容时无法识别CSS字体。强制切换为SVG渲染后，轴标签作为DOM元素，样式更容易被捕获：

在Highcharts初始化配置中添加：

Highcharts.chart('chart-container', {
    chart: {
        type: 'line',
        renderTo: 'chart-container',
        animation: false, // 关闭动画避免渲染异常
        renderer: 'svg' // 指定SVG渲染器
    },
    // 其他图表配置...
});

3. 调整html2canvas配置优化字体捕获 #

修改html2canvas参数，提升字体识别能力：

html2canvas: { 
    scale: 2,
    useCORS: true, // 处理跨域加载的字体
    allowTaint: true,
    logging: false
},

4. 直接在Highcharts轴配置中设置字体样式 #

跳过全局CSS，直接在Highcharts的轴标签配置中指定字体，确保样式优先级：

xAxis: {
    labels: {
        style: {
            fontFamily: "'YekanBakh', sans-serif !important"
        }
    }
},
yAxis: {
    labels: {
        style: {
            fontFamily: "'YekanBakh', sans-serif !important"
        }
    }
}

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