如何解决在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、最后预览展示结果：
页:
[1]