如何解决在Vue框架下导出PDF乱码
本帖最后由 KearneyKang 于 2021-5-13 15:25 编辑ActiveReports是一款轻量级纯前端的报表控件，适合任何web项目，但是在报表导出的时候由于缺少对应的字体引用，会存在导出PDF乱码的情况。下面我们就来说说如何解决导出PDF乱码的问题
第一种办法：
1、首先在新建一个font文件，放入对应的字体文件配置放在 "fontsConfig.json”中， 这里我们使用 “微软雅黑”为例
微软雅黑字体：SimHei.ttf
{
"path": "",
"descriptors": [
{
"name": "微软雅黑",
"locals": [
"微软雅黑",
"MicrosoftYaHei"
],
"source": "fonts/SimHei.ttf"
},
{
"name": "微软雅黑 Light"
},
{
"name": "等线"
},
{
"name": "等线 Light"
},
{
"name": "宋体",
"source": "fonts/SimHei.ttf"
},
{
"name": "仿宋"
},
{
"name": "新宋体"
},
{
"name": "幼圆"
},
{
"name": "楷体"
},
{
"name": "隶书"
},
{
"name": "黑体",
"source": "fonts/SimHei.ttf"
},
{
"name": "Arial"
},
{
"name": "Arial Black"
},
{
"name": "Comic Sans MS"
},
{
"name": "Courier New"
},
{
"name": "Geneva"
},
{
"name": "Georgia"
},
{
"name": "Helvetica"
},
{
"name": "Impact"
},
{
"name": "Lucida Console"
},
{
"name": "Meiryo"
},
{
"name": "Meiryo UI"
},
{
"name": "MingLiU"
},
{
"name": "MingLiU-ExtB"
},
{
"name": "MS Gothic"
},
{
"name": "MS Mincho"
},
{
"name": "MS PGothic"
},
{
"name": "MS PMincho"
},
{
"name": "MS Song"
},
{
"name": "MS UI Gothic"
},
{
"name": "NSimSun"
},
{
"name": "Osaka"
},
{
"name": "PMingLiU"
},
{
"name": "PMingLiU-ExtB"
},
{
"name": "SimSun"
},
{
"name": "SimSun-ExtB"
},
{
"name": "Song"
},
{
"name": "Tahoma"
},
{
"name": "Times New Roman"
},
{
"name": "Trebuchet MS"
},
{
"name": "Verdana"
},
{
"name": "Yu Gothic"
}
]
}2、打开src中的App.vue文件
导入该方法：
import { FontStore } from "@grapecity/activereports/core";
添加该方法进行字体config文件配置
FontStore.registerFonts("/fonts/fontsConfig.json");详细代码如下：
<template>
<div>
<button @click="expExcel">Excel</button>
<button @click="expPDF">PDF1</button>
</div>
<div id="viewer-host">
<JSViewer v-bind:availableExports="['pdf', 'xlsx', 'html']" v-bind:report="{ Uri: 'design-report.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 { XlsxExport} from '@grapecity/activereports';
import { Core, PdfExport } from "@grapecity/activereports";
import { FontStore } from "@grapecity/activereports/core";
export default {
name: "App",
components: {
JSViewer: Viewer,
},
methods: {
expExcel() {
var ARJS = Core;
var Excel = XlsxExport;
var settings = {
sheetName: '快递单',
pageSettings: {
size: 'A4',
orientation: 'portrait'
}
}
var pageReport = new ARJS.PageReport();
pageReport.load('design-report.rdlx-json')
.then(function () { return pageReport.run() })
.then(function (pageDocument) { return Excel.exportDocument(pageDocument, settings) })
.then(function (result) { result.download('arjs-excel') });
},
expPDF() {
console.log('exportReport()--type:');
var ARJS = Core;
var PDF = PdfExport;
var settings = {
info: {
title: '快递单',
author: 'GrapeCity inc.',
},
pdfVersion:"1.7"
}
var pageReport = new ARJS.PageReport();
pageReport.load('/design-report.rdlx-json')
.then(function() { return pageReport.run() })
.then(function(pageDocument) { return PDF.exportDocument(pageDocument, settings) })
.then(function(result) { result.download('arjs-pdf') });
}
}
};
FontStore.registerFonts("/fonts/fontsConfig.json");
</script>
<style>
#viewer-host {
width: 100%;
height: 100vh;
}
</style>3、预览结果如下：
第二种办法
1、首先在新建一个font文件，放入对应的字体文件 这里我们使用 “微软雅黑”为例
微软雅黑字体：SimHei.ttf
2、打开src中的App.vue文件
3、进行字体文件的配置（.ttf的字体文件）
整体详细代码如下：
<template>
<div id="app" style="height: 600px">
<GcArViewer ref="control" v-bind:zoom="reportZoom"
viewMode="paginated"
v-bind:availableExports = "['pdf', 'xlsx']"
v-on:report-loaded="this.onReportLoaded"
v-on:document-loaded="onDocumentLoaded"
:report="{ Uri: 'zuantoushiyong.rdlx-json' }"/>
</div>
</template>
<script>
import Vue from 'vue';
import '@grapecity/activereports/styles/ar-js-viewer.css';
import { Viewer} from '@grapecity/activereports-vue';
import '@grapecity/activereports';
export default Vue.extend ({
name: 'app',
components: {
GcArViewer: Viewer
},
data: function () {
return {
reportZoom: 'FitPage',
}
},
mounted(){
var htmlBtnIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" height="24"><path class="gc-icon-color--text" d="M19 26v2c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h10v6c0 1.1.9 2 2 2h5v2H6c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h13zM13 3v6c0 .6.5 1 1 1h5l-6-7zM6 14c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h23c1.1 0 2-.9 2-2v-7c0-1.1-.9-2-2-2H6zm23 8v1h-5v-7h1v6h4zm-15-5v6h1v-6h2v-1h-5v1h2zm-4 2v-3h1v7h-1v-3H7v3H6v-7h1v3h3zm10.5 0L19 16h-1v7h1v-5l1 2h1l1-2v5h1v-7h-1l-1.5 3z" fill-rule="evenodd" clip-rule="evenodd" /></svg>';
this.getViewer().toolbar().addItem({
key: '$html-export-btn',
icon: { type:'svg', content:htmlBtnIcon },
title: "HTML Export",
enabled: true,
action: () => { this.getViewer().export('html', []).then((result) => result.download("Exported_HTML")) }
});
this.getViewer().registerFont({
source: 'fonts/SimHei.ttf',
name: '微软雅黑'
});
},
methods: {
onDocumentLoaded: function (a) { console.log("document loaded", a);
},
onReportLoaded: function (arg) { console.log ("report loaded", arg);
},
getViewer() {
return this.$refs.control;
}
}
});
</script>4、最后预览展示结果
页:
[1]