Kendo PDF Angular特殊字符显示异常问题及解决咨询

针对你遇到的Frío这类特殊字符导出后显示乱码（如FR˝O.）的问题，以下是具体解决方案：

核心问题排查 #

你的代码存在两个关键问题：

• 局部样式使用了未在PDF导出配置中定义的Roboto字体，导致导出时无法匹配对应字符集
• CDN加载字体可能存在加载延迟或跨域问题，PDF生成时字体未完全就绪

分步修复方案 #

1. 统一使用支持特殊字符的字体 #

DejaVuSans本身支持西班牙语特殊字符，移除局部的Roboto样式，确保全局应用该字体：

2. 嵌入字体到样式（推荐Base64方式） #

将DejaVuSans.ttf转换为Base64编码（可通过在线工具完成），直接嵌入到@font-face中，避免CDN加载不稳定问题：

修改后的kendo-pdf-export代码：

<kendo-pdf-export #pdf2 paperSize="letter" margin="0.4cm" landscape="true" forcePageBreak=".page-break" 
style="@font-face {
        font-family: 'DejaVuSans';
        src: url(data:font/truetype;base64,[替换为你的DejaVuSans.ttf Base64编码]) format('truetype');
        font-weight: normal;
        font-style: normal;
    };
    * {
        font-family: 'DejaVuSans', sans-serif !important;
    }">
      <ng-template kendoPDFTemplate let-pageNum="pageNum" let-totalPages="totalPages">
<div class="col-lg">
                <strong class="text-left text d-block mb-1" *ngIf="ClienteMolino && ClienteMolino != null">Cliente: {{ClienteMolino}}</strong>
                <strong class="text-left text d-block mb-1">
                    Producto: <span>{{Producto}}</span>
                </strong>
              </div>
</ng-template>
</kendo-pdf-export>

3. 替换[innerHTML]绑定（可选） #

如果Producto是纯文本内容，直接用插值绑定{{Producto}}即可，避免[innerHTML]可能引入的编码异常，同时确保变量存储的是UTF-8编码的字符串。

4. 预加载字体（可选） #

若仍存在字体加载不及时问题，可在组件中预加载字体：

import { Component, OnInit } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit {
  ngOnInit(): void {
    const font = new FontFace('DejaVuSans', 'url(https://kendo.cdn.telerik.com/2018.2.620/styles/fonts/DejaVu/DejaVuSans.ttf)');
    font.load().then(loadedFont => {
      document.fonts.add(loadedFont);
    });
  }
}

额外注意事项 #

• 确认Producto变量未被错误编码，确保内容为标准UTF-8格式
• 测试前清除浏览器缓存，避免旧字体文件干扰

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