[]
        
(Showing Draft Content)

字体设置

ActiveReportsJS在客户端上运行,展示和导出打印报表,这意味着该代码会在不同的平台,环境和浏览器上执行。如果报表中使用的是非标准的字体来设置文本框样式,例如 google 字体,那么很有可能该字体在某些将运行,导出或打印报表的环境中不可用。

为了缓解此问题,ActiveReportsJS提供了API,用于为将在应用程序中使用的报表中注册字体。 注册字体的基本类型是 FontDescriptor,如下是使用 Roboto 字体的示例:

const robotoFont = {
  name: "Roboto",
  source:
    "https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxIIzI.woff2",
};

FontStore 对象的registerFont 方法可以接收字体描述器,并将字体注入到报表中:

import { Core } from "@grapecity/activereports";

await Core.FontStore.registerFonts(robotoFont);

在预览,导出或打印使用自定义字体的报表之前应执行以上代码,才能够避免乱码。

注意

  • 只支持 .ttf,.otf,.woff 字体(IE11 不支持 woff2)
  • IE 和Edge浏览器不支持 Document.fonts。 一些功能可以使用polyfills
  • 如果字体URL 不可用,字体是不会加载的,检查浏览器控制台信息
  • PDF 导出会忽略locals 属性,只从source加载文件
  • 通用的@font-face CSS 规则在导出HTML 时被拒绝的,Source 中的相关路径URL有问题时候,应该注册绝对路径
  • 不支持.tte 文件

相关资源