关于 ARJS 导出PDF 中文乱码及使用特殊字体设置方法

登录

本帖最后由 Lenka.Guo 于 2020-1-3 15:37 编辑

字体设置

在报表设计过程中，我们会为报表设计一些特殊字体或者本地安装的字体，这些字体也许可能不会被浏览器识别，预览，打印或导出。

通常情况下，浏览器加载特殊字体会遵循@font-face 规则，如果 HTML 元素不可见或者当前页面没有设置该元素，@ font-face规则就不会被处理。
为了保证浏览器能够识别正确的字体并且加载@font-rulers CSS 规则，首先需要准备字体描述，并且注册。以下是在Viewer 中使用字体的两种场景：

1. 用户加载或注册字体，全部通过代码使用。

2. 直接在Viewer 中注册字体，字体在设计报表时，已经添加到（fontConfig.json）文件中。

场景1 ：

准备字体描述器（Font Descriptors）

font descriptor 接口由以下内容组成：

l locals: 接受浏览器调用的字体的安装副本的字体名称，用于浏览器在系统目录中查找（C：\ Windows \ Fonts，/ usr / share / fonts等）中搜索时使用的已安装字体副本的字体名称。它不接受路径。

l source: 可直接下载字体的URL，如果字体没有在安装目录下找到，会去在URL 下面接受，如绝对路径 ("http://…") 相关路径 ("/…"), 但不是本地路径

const fonts: FontDescriptor[]= [

{

locals: ['Noto Sans'], // try to find this font on local machine before load from remote

source: 'fonts/NotoSansCJKjp-Regular.otf' // remote URL

},

{

locals: ['Noto Serif', 'Arial'], // try to find "Noto Serif" on local machine or use"Arial" instead before loading from remote

source: 'fonts/NotoSerifCJKjp-Regular.otf' // remote URL

}

];

注册字体：

在Viewer 中添加字体描述器，使用 viewer.registerFont():

const viewer = new ActiveReports.Viewer('#root');

viewer.registerFont(...fonts)

.then(()=> viewer.open('/reports/InvoiceList.rdlx-json'));

或者使用 PageReport的GC.ActiveReports.Core.registerFont():接口：

const report = new GC.ActiveReports.Core.PageReport();

GC.ActiveReports.Core.registerFont(...fonts)

.then(() => report.load('/reports/InvoiceList.rdlx-json'))

.then(() => report.run())

.then(document => document.print());

完整的代码如下：

<head>

<title>ActiveReportsJSViewer</title>

</head>

var Noto_Sans = {

locals: ['Noto Sans'],

source: 'fonts/NotoSansCJKjp-Regular.otf'

};

var Noto_Serif = {

locals: ['Noto Serif', 'Arial'],

source: 'fonts/NotoSerifCJKjp-Regular.otf'

};

var fonts = [Noto_Sans,Noto_Serif];

function load() {

const report = newGC.ActiveReports.Core.PageReport();

GC.ActiveReports.Core.registerFont(...fonts)

.then(() => report.load('/reports/InvoiceList.rdlx-json'))

.then(() => report.run())

.then(document => document.print());

}

</script>

</body>

如果要注册 .ttc 文件，需要添加"postscriptName"属性：

viewer.registerFont({

src: 'fonts/msgothic.ttc',

postscriptName: 'MS-Gothic'

});

场景2：在JSON 文件中添加 FontDescriptors

ARJS 可用的字体都在 fontsConfig.json 文件中配置了， 如果要修改字体配置可以打开该文件去修改，文件路径：

For Windows: ~\AppData\Roaming\ActiveReportsJS Designer\.
For macOS: ~/Library/Application Support/ActivereportsJS Designer/.
For Linux: ~/.config/ActivereportsJS Designer/.

2. 修改fontsConfig.json 文件，添加以下内容

{

"path": "",

"descriptors": [

{

"name": "Noto Sans CJK JP",

"source": "NotoSansCJKjp-Regular.otf"

},

{

"name": "Noto Serif CJK JP",

"source": "NotoSerifCJKjp-Regular.otf"

}

]

}

这样的话就可以在设计器中使用添加的字体。

从Json File 注册字体：

function load() {

const viewer = newActiveReports.Viewer('#ARJSviewerDiv');

viewer.registerFont("/fonts/fontsConfig.json"); //addfontsConfig.json in 'fonts' folder

viewer.open('/reports/InvoiceList-Fonts.rdlx-json');

}

</script>

</body>

注意

l 只支持 .ttf，.otf,.woff 字体（IE11 不支持 woff2）

l IE 和Edge浏览器不支持 Document.fontsAPI。一些功能可以使用polyfills 实现

l 需要从registerFont () 方法加载，因此需要时间消耗。

l 如果字体URL 不可用，字体是不会加载的，检查浏览器控制台信息

l PDF 导出会忽略locals 属性，只从源加载文件

l 通用的@font-face CSS 规则在导出HTML 时被拒绝的，Source 中的相关路径URL有问题时候，应该注册绝对路径

l @font-face CSS 替换网页的全部字体，因此Viewer UI 中的所有字体都会受到影响。

l ,tte 文件不支持。如果需要可以使用在线转换工具将字体转换为ttf的格式：https://transfonter.org/ttc-unpack

l 如果部署预览的话，需要注册字体的MIME 类型，如图

输入：.ttf MIME 类型：application/octet-stream

		自动登录	找回密码
密码			立即注册

关于 ARJS 导出PDF 中文乱码及使用特殊字体设置方法

本帖子中包含更多资源

0 个回复

活字格认证

讲师达人

悬赏达人

微信认证勋章

元老葡萄