Vue 项目Active Reports JS PDF乱码解决

ActiveReportsJS PDF 导出需要注册字体，因为它将其子集嵌入到PDF文档中。因此，确保所有环境中报表输出一致的最佳方法是配置ActiveReportsJS组件以访问可下载的字体资源。本文提供了实现该目标的分步指南。

解决思路是：ActiveReportsJS的桌面设计器的字体配置要与导出PDF的字体配置一致

打开windows的资源管理器，目录：C:\Users\Administrator\AppData\Roaming\ActiveReportsJS Designer，找到fontsConfig.json文件，并打开

打开该文件，该文件结构如下图

新建一个楷体1的字体选项，如下图所示

该字体是在Windows字体库中的楷体字体，我们单独将其命名为楷体1，这样在Active Reports JS的桌面设计器中，就可以找到楷体1的字体选项

打开Active Reports JS的桌面设计器，随便创建一个文本框，找到字体配置

如图，就可以找到楷体1

在设计Active Reports JS的报表，使用楷体1字体。创建一个表格。渲染效果如下图

在Vue项目中，public文件夹下，新建fonts文件夹，将刚才修改的fontsConfig.json复制一份，粘贴到fonts文件夹下。

然后打开fontsConfig.json，将楷体1的Source改为"/fonts/simkai.ttf"

     {"name": "楷体","locals": ["楷体"],"source": "/fonts/simkai.ttf"},

注意：桌面设计器的fontsConfig.json中，楷体1的source路径是"C:/Windows/Fonts/simkai.ttf.ttc"

而public/fonts/ fontsConfig.json的楷体1的source路径是"/fonts/simkai.ttf"

进入C:\Windows\Fonts，将楷体文件复制到public/fonts目录下

//在导出PDF的页面文件中，引用FontStoreimport { FontStore } from '@grapecity/activereports/core'// 注册字体配置FontStore.registerFonts('/fonts/fontsConfig.json')

完整代码如下：

<template><div style="width: 100%; height: 100vh"><a-button @click="expPDF">PDF</a-button><JSViewer id="viewer" ref="reportViewer" style="height: 800px" language="zh"></JSViewer></div></template><script>import { Viewer } from '@grapecity/activereports-vue'import '@grapecity/activereports-localization'import '@grapecity/activereports/styles/ar-js-ui.css'import '@grapecity/activereports/styles/ar-js-viewer.css'import { Core, PdfExport } from '@grapecity/activereports'import { FontStore } from '@grapecity/activereports/core'FontStore.registerFonts('/fonts/fontsConfig.json')export default {components: {JSViewer: Viewer,},data() {return {}},mounted: async function () {this.$refs.reportViewer.Viewer().open('/xse.rdlx-json')},methods: {expPDF() {var ARJS = Corevar PDF = PdfExportvar settings = {info: {title: '快递单',author: 'GrapeCity inc.',},pdfVersion: '1.7',}var pageReport = new ARJS.PageReport()pageReport.load('/xse.rdlx-json').then(function () {return pageReport.run()}).then(function (pageDocument) {return PDF.exportDocument(pageDocument, settings)}).then(function (result) {result.download('arjs-pdf')})},},}</script>

Vue 项目Active Reports JS PDF乱码解决相关推荐

Vue项目打包后js文件压缩
前言这段时间因为免费试用了https://free.aliyun.com/一台阿里云的服务器,配置是 2核4G 2M, 因为带宽太低了,每次在第一次加载的时候太慢了,通过F12调试,发现主要是因为加 ...
在Vue项目中使用LayUI教程且解决laydate无效的问题
在Vue项目中使用LayUI教程且解决laydate无效的问题 1,安装LayUI开发包 2,导入LayUI开发包 3,在挂载函数mounted中加载LayUI组件 4,解决加载LayUI日期组件出现 ...
VUE项目中遇到的问题和解决办法 (1) route.query刷新后丢失
VUE项目中遇到的问题和解决办法 (1) route.query刷新后丢失背景:今天在写项目时需要用到,route.query获取参数,本来这是一个很简单的问题,但是我遇到了参数丢失的问题环境: ...
vue项目中，js根据文件名后缀，判断文件图片、视频、文档、pdf等类型的方法
vue项目中,在获得文件名信息,需要根据文件名的后缀来区分文件类型的方法如下:其中,文件后缀可自由拓展. // 根据文件名后缀区分文件类型/** @param: fileName - 文件名称* @ ...
vue项目中预览pdf文件
一.利用浏览器自带的预览pdf // [pdfUrl] 获取pdf地址 eg:http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pl ...
新窗口打开vue项目中的静态pdf文件，并做权限控制
问题:公司系统做安全测试,其中一个问题是没有登录的情况下,直接访问 "项目地址/operate.pdf "此地址,会展示pdf文件. 描述:点击系统内的一个按钮会打开新窗口展示系统 ...
vue项目将页面生成pdf
项目场景: vue项目运行在移动端(企业微信聊天栏工具.企业微信浏览器.微信浏览器.外部浏览器),PC端(微信浏览器.其他厂商浏览器),利用html2canvas将页面生成图片文件,并采用jspdf将 ...
微服务电商实战(十一)搭建vue项目对接注册登陆接口，解决跨域问题，使用七牛云实现头像上传
一.简介 node.js版本:v12.16.3 node.js下载 vue官网教程 iview介绍上传头像接口,图片存储在七牛云中,注册并实名认证之后可以免费使用以下会描述使用vue搭建项目框架的 ...
vue项目报sockjs.js?9be2:1606 GET http://192.168.43.226:8080/sockjs-node/info?t=1584966826465 net::ERR_
在做vue项目时,突然就报sockjs.js?9be2:1606 GET http://192.168.43.226:8080/sockjs-node/info?t=1584966826465 net ...

Vue 项目Active Reports JS PDF乱码解决

Vue 项目Active Reports JS PDF乱码解决相关推荐

最新文章

热门文章