ActiveReportsJS默认可以导出PDF、Excel、Html。但是在导出PDF的时候需要进行字体文件的配置,如果没有进行字体配置,那么导出PDF就会出现乱码
下面就来进行字体配置的具体讲解
1、首先新建一个项目,项目名称叫做 "arjsfont"
2、打开public文件,新建一个fonts文件,
进行字体的配置,字体文件可以在本机获取或者直接在网上下载:本机文件位置(C:\Windows\Fonts)
网上下载直接这样进行搜索如:宋体字体格式ttf下载
配置文件(这里我默认设置的字体是微软雅黑、楷体,宋体)
{ "path": "", "descriptors": [ { "name": "微软雅黑", "locals": [ "微软雅黑", "MicrosoftYaHei" ], "source": "fonts/SimHei.ttf" }, { "name": "楷体", "locals": [ "楷体", "楷体" ], "source": "fonts/simkai.ttf" }, { "name": "宋体", "locals": [ "宋体", "宋体" ], "source": "fonts/simsun.ttf" } ] }
3、打开项目中的 app.vue文件,导入该方法:
import { FontStore } from "@grapecity/activereports/core";
具体代码
<template> <div id="viewer-host"> <JSViewer v-bind:availableExports="['pdf', 'xlsx', 'html']" v-bind:report="{ Uri: 'zuantoushiyong.rdlx-json' }"></JSViewer> </div> </template> <script> import { Viewer } from "@grapecity/activereports-vue"; import "@grapecity/activereports/styles/ar-js-ui.css"; import "@grapecity/activereports/styles/ar-js-ui.css"; import "@grapecity/activereports/styles/ar-js-viewer.css"; import "@grapecity/activereports" import { FontStore } from "@grapecity/activereports/core"; export default { name: "App", components: { JSViewer: Viewer, } } FontStore.registerFonts("/fonts/fontsConfig.json");//引入字体配置json文件 </script> <style> #viewer-host { width: 100%; height: 100vh; } </style>
4、预览结果
5、导出PDF样式
6、Demo实例下载