Angular PrimeNG DataTable导出PDF乱码问题求助

1. 修复字体缺失导致的乱码 #

PrimeNG默认PDF导出仅支持英文字体，非ASCII字符（如中文）会出现乱码，需自定义加载支持多语言的字体：

• 将字体文件（如NotoSansSC-Regular.ttf）放入项目assets/fonts目录
• 在angular.json的assets数组中添加字体目录配置，确保打包后可访问：

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

• 导出时指定字体参数：

import { Table } from 'primeng/table';

exportToPDF(table: Table) {
  table.exportPDF({
    fileName: '数据报表.pdf',
    pdfFont: {
      source: 'assets/fonts/NotoSansSC-Regular.ttf',
      name: 'NotoSansSC'
    },
    styles: {
      font: 'NotoSansSC',
      fontSize: 10
    }
  });
}

2. 调整导出格式配置 #

格式异常多因列宽、换行、样式未配置导致，可针对性调整：

• 指定列宽与自动换行：

table.exportPDF({
  fileName: '数据报表.pdf',
  pdfFont: { /* 字体配置 */ },
  columns: [
    { field: 'id', header: 'ID', width: '5%' },
    { field: 'name', header: '名称', width: '20%' }
  ],
  wrapText: true
});

• 自定义表头与内容样式：

headerStyles: {
  font: 'NotoSansSC',
  fontSize: 12,
  fontWeight: 'bold',
  alignment: 'center'
},
styles: {
  font: 'NotoSansSC',
  fontSize: 10,
  alignment: 'left'
}

3. 升级PrimeNG版本 #

旧版本PrimeNG存在PDF导出的兼容性bug，建议升级至稳定版（如16.x及以上）：

npm install primeng@latest primeicons@latest

升级后重启项目并清理缓存再测试导出。

4. 处理特殊内容格式 #

若表格包含HTML标签或自定义模板内容，需先转为纯文本：

// 移除HTML标签的格式化函数
formatPlainText(value: string) {
  return value ? value.replace(/<[^>]+>/g, '') : '';
}

// 导出时应用格式化
table.exportPDF({
  fileName: '数据报表.pdf',
  pdfFont: { /* 字体配置 */ },
  columns: [
    { 
      field: 'desc', 
      header: '描述', 
      body: (data: any) => this.formatPlainText(data.desc) 
    }
  ]
});

内容的提问来源于stack exchange，提问作者Sadrettin Gören