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的页面文件中，引用FontStore

import { 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 = Core

      var PDF = PdfExport

      var 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>