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

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

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

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

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

复制代码

整体详细代码如下：

1. import React from 'react';
   
2. import './App.css';
   
3. import '@grapecity/activereports/styles/ar-js-viewer.css';
   
4. import {} from '@grapecity/activereports-localization';
   
5. import { Viewer } from '@grapecity/activereports-react';
   
6. import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports';
   
7.    class App extends React.Component {
   
8. 
   
9. _viewer = Viewer;
   
10.   componentDidMount(){
    
11.   this._viewer.registerFont({
    
12.   source: 'fonts/SimHei.ttf',
    
13.   name: '微软雅黑'
    
14. });
    
15.   }
    
16.     render() {
    
17.          return (<div className="demo-app" style={{ height: '1000px'}} >
    
18.                     <Viewer
    
19.                       report={{ Uri: "zuantoushiyong.rdlx-json" }}
    
20.                       sidebarVisible={true}
    
21.                       toolbarVisible={false}
    
22.                       language = 'zh-CN'
    
23.                       ref={ ref => this._viewer = ref } />
    
24.                     </div>);
    
25.        }
    
26.      }
    
27.   export default App;
    

复制代码

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

1. componentDidMount(){
   
2.     this._viewer.registerFont({
   
3.   src: 'fonts/msgothic.ttc',
   
4.   name: 'MS Gothic',
   
5.   postscriptName: 'MS-Gothic'
   
6. }, {
   
7.   src: 'fonts/msgothic.ttc',
   
8.   name: 'MS UI Gothic',
   
9.   postscriptName: 'MS-UIGothic'
   
10. }, {
    
11.   src: 'fonts/msgothic.ttc',
    
12.   name: 'MS PGothic',
    
13.   postscriptName: 'MS-PGothic'
    
14. });

复制代码

4、最后预览展示结果：