Kendo UI Core 中 PDF 导出与嵌入式字体详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00491/article/details/148862872

Kendo UI Core 中 PDF 导出与嵌入式字体详解

kendo-ui-core An HTML5, jQuery-based widget library for building modern web apps. 项目地址: https://gitcode.com/gh_mirrors/ke/kendo-ui-core

前言

在现代 Web 开发中，将页面内容导出为 PDF 是一个常见需求。Kendo UI Core 提供了强大的 PDF 导出功能，但处理 Unicode 字符和字体嵌入时需要注意一些关键点。本文将深入探讨如何在 Kendo UI Core 中正确使用嵌入式字体来实现完美的 PDF 导出效果。

标准 PDF 字体的局限性

PDF 标准字体仅支持基本的 ASCII 字符集（约 128 个字符），这对于现代多语言 Web 应用来说是远远不够的。当需要显示中文、日文、阿拉伯文等 Unicode 字符时，必须使用嵌入式字体技术。

嵌入式字体的实现方式

1. 使用 CSS @font-face 声明

这是推荐的做法，既能在浏览器中正确显示，也能在 PDF 导出时保持一致性。

<style>
  /* 声明基础字体样式 */
  body {
    font-family: "思源黑体", "Microsoft YaHei", sans-serif;
  }

  /* 定义常规字体 */
  @font-face {
    font-family: "思源黑体";
    src: url("/fonts/SourceHanSansCN-Regular.ttf") format("truetype");
  }

  /* 定义粗体 */
  @font-face {
    font-family: "思源黑体";
    font-weight: bold;
    src: url("/fonts/SourceHanSansCN-Bold.ttf") format("truetype");
  }

  /* 定义斜体 */
  @font-face {
    font-family: "思源黑体";
    font-style: italic;
    src: url("/fonts/SourceHanSansCN-Italic.ttf") format("truetype");
  }
</style>

关键点：

必须提供所有需要的字重和样式变体（常规、粗体、斜体等）
字体文件需要放在可访问的位置
确保字体许可证允许嵌入 PDF

2. 使用 JavaScript API 定义字体

对于需要更精细控制的情况，可以使用 Kendo UI 提供的 defineFont 方法：

kendo.pdf.defineFont({
  "思源黑体": "/fonts/SourceHanSansCN-Regular.ttf",
  "思源黑体|Bold": "/fonts/SourceHanSansCN-Bold.ttf",
  "思源黑体|Italic": "/fonts/SourceHanSansCN-Italic.ttf"
});

注意事项：