如何解决在React框架下导出PDF乱码

登录

本帖最后由 KearneyKang 于 2022-3-14 17:15 编辑

ActiveReportsJS是一款轻量级纯前端的报表控件，适合任何web项目，但是在报表导出的时候由于缺少对应的字体引用，会存在导出PDF乱码的情况。下面我们就来说说如何解决导出PDF乱码的问题
1、首先在新建一个font文件，放入对应的字体文件这里我们使用 “微软雅黑”为例
微软雅黑字体：SimHei.ttf

2、打开src中的App.JS文件

3、进行字体文件的配置（.ttf的字体文件）

componentDidMount(){
this._viewer.registerFont({
source: 'fonts/SimHei.ttf',
name: '微软雅黑'
});

复制代码

整体详细代码如下：

import React from 'react';
import './App.css';
import '@grapecity/activereports/styles/ar-js-viewer.css';
import {} from '@grapecity/activereports-localization';
import { Viewer } from '@grapecity/activereports-react';
import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports';
class App extends React.Component {
_viewer = Viewer;
componentDidMount(){
this._viewer.registerFont({
source: 'fonts/SimHei.ttf',
name: '微软雅黑'
});
}
render() {
return (<div className="demo-app" style={{ height: '1000px'}} >
<Viewer
report={{ Uri: "zuantoushiyong.rdlx-json" }}
sidebarVisible={true}
toolbarVisible={false}
language = 'zh-CN'
ref={ ref => this._viewer = ref } />
</div>);
}
}
export default App;

复制代码

进行字体文件的配置（.ttf的字体文件）

componentDidMount(){
this._viewer.registerFont({
src: 'fonts/msgothic.ttc',
name: 'MS Gothic',
postscriptName: 'MS-Gothic'
}, {
src: 'fonts/msgothic.ttc',
name: 'MS UI Gothic',
postscriptName: 'MS-UIGothic'
}, {
src: 'fonts/msgothic.ttc',
name: 'MS PGothic',
postscriptName: 'MS-PGothic'
});

复制代码

4、最后预览展示结果：

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

如何解决在React框架下导出PDF乱码

本帖子中包含更多资源

0 个回复

圣诞拼拼乐

微信认证勋章

讲师达人

悬赏达人

元老葡萄