Kendo UI Angular PDF导出印地语字体不显示问题求助

我在使用Kendo UI Angular的PDF导出功能时，遇到了印地语字符无法正确渲染的问题——PDF能正常导出，但所有印地语文本都显示异常（比如方块、乱码）。

代码示例如下：

import { Component, ViewEncapsulation } from '@angular/core';
import { products } from './products';

@Component({
  selector: 'my-app',
  template: `
    <button kendo-button (click)="pdf.saveAs('table.pdf')">
      Save As PDF...
    </button>
    <kendo-pdf-export #pdf paperSize="A4" margin="2cm" [repeatHeaders]="true">
      <div>header info 1</div>
      <div class="pdf-export-only">अधिकारों</div>
      <kendo-grid [kendoGridBinding]="products">
        <kendo-grid-column field="ProductID" title="ID" width="100"></kendo-grid-column>
        <kendo-grid-column field="ProductName" title="Name"></kendo-grid-column>
      </kendo-grid>
    </kendo-pdf-export>
  `,
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./pdf-styles.css'],
})
export class AppComponent {
  public products: any[] = products;
}

我已经尝试过：

• 使用多种支持印地语的字体（如Noto Sans Devanagari、Arial Unicode MS）
• 在项目中引入字体文件
• 配置Kendo PDF导出使用指定字体

以下是经过验证的解决步骤：

1. 正确配置字体文件与项目打包

   • 将支持印地语的字体文件（如NotoSansDevanagari-Regular.ttf）放入项目的assets/fonts目录
   • 在angular.json的assets数组中添加字体目录，确保打包时能包含：

     "assets": [
       "src/favicon.ico",
       "src/assets",
       "src/assets/fonts"
     ]
     

2. 通过CSS声明字体并指定导出样式
   在pdf-styles.css中添加@font-face声明，并为PDF导出内容指定字体（注意使用k-pdf-export类提高样式优先级，避免被Kendo默认样式覆盖）：

   @font-face {
     font-family: 'Noto Sans Devanagari';
     src: url('../assets/fonts/NotoSansDevanagari-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
   }
   
   .k-pdf-export .pdf-export-only,
   .k-pdf-export .k-grid {
     font-family: 'Noto Sans Devanagari', sans-serif !important;
   }
   

3. 在Kendo PDF导出组件中指定字体文件
   为<kendo-pdf-export>添加[fontFiles]属性，传入字体文件的路径数组，确保jsPDF能正确嵌入字体：

   <kendo-pdf-export #pdf paperSize="A4" margin="2cm" [repeatHeaders]="true"
     [fontFiles]="['./assets/fonts/NotoSansDevanagari-Regular.ttf']">
     <!-- 原有内容 -->
   </kendo-pdf-export>
   

4. 检查依赖版本
   确保@progress/kendo-angular-pdf-export和其依赖的jspdf是最新版本，旧版本可能对复杂脚本（如印地语天城文）的支持不足。可以通过以下命令更新：

   npm update @progress/kendo-angular-pdf-export jspdf
   

关键注意点：

• 印地语属于复杂脚本，必须使用专门支持天城文的字体，普通多语言字体可能渲染异常
• 样式优先级很重要，必须确保导出时的字体样式能覆盖Kendo Grid的默认字体
• 字体文件路径要正确，避免404导致无法加载字体

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