Vue集成报表系列教程5

最新推荐文章于 2025-05-23 08:45:00 发布
置顶 最新推荐文章于 2025-05-23 08:45:00 发布
阅读量387 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： vue.js javascript 大数据 json linux
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21779101/article/details/117735939
本文详细介绍了在Vue项目中使用ActiveReportsJS导出PDF时如何进行字体配置，以避免出现乱码问题。通过创建新项目'arjsfont'，在public文件夹下新建fonts文件夹并配置微软雅黑字体，然后在app.vue文件中引入相应方法，实现PDF样式正确显示。最后提供了Demo实例下载。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

导出PDF字体配置

ActiveReportsJS默认可以导出PDF、Excel、Html。但是在导出PDF的时候需要进行字体文件的配置，如果没有进行字体配置，那么导出PDF就会出现乱码

下面就来进行字体配置的具体讲解

1、首先新建一个项目，项目名称叫做 "arjsfont"

2、打开public文件，新建一个fonts文件，进行字体的配置

配置文件(这里我默认设置的字体是微软雅黑)

{

    "path": "",

    "descriptors": [

        {

            "name": "微软雅黑",

            "locals": [

                "微软雅黑",

                "MicrosoftYaHei"

            ],

            "source": "fonts/SimHei.ttf" 

        },

        {

            "name": "微软雅黑 Light"         

        },

        {

            "name": "等线"

        },

        {

            "name": "等线 Light"

             

        },

        {

            "name": "宋体",

            "source": "fonts/SimHei.ttf"

 

 

        },

        {

            "name": "仿宋"

        },

        {

最低0.47元/天 解锁文章
qq_21779101
关注
Vue集成报表系列教程1
qq_21779101的博客
06-09 971
Viewer 集成 本实例详细讲解了如何在Vue中集成ActiveReportsJS Viewer
Vue集成报表系列教程6
qq_21779101的博客
06-09 2664
工具栏添加按钮
Vue.js：报表开发
最新发布
毒果的博客
05-23 466
例如，在开发销售报表时，订单数据可能存储在 MySQL 数据库，商品信息来自 MongoDB，而用户数据又存于 Redis，如何将这些分散的数据高效整合并处理成报表所需的格式，是开发初期面临的首要挑战。此外，报表的美观性也是重要考量，如何在保证数据清晰呈现的同时，设计出符合企业风格的视觉效果，需要反复调试。例如，在多维度数据报表中，当用户通过下拉框选择筛选条件时，不仅要实时更新图表数据，还要同步刷新关联表格，若处理不当，容易出现数据不一致或页面响应延迟的情况。但在处理大量历史数据时，报表加载速度较慢。
vue报表系统
03-12
这是用vue.js开发的报表系统前端，其中包括表格、饼状图、柱状图、折线图、侧边导航栏，饼状图、柱状图、折线图使用了vchart插件，通过axios技术与后台交互
【VUE项目实战】60、数据报表模块介绍和基础框架搭建
程序猿之洞
07-23 5383
使用Echarts组件绘制折线图
vue报表插件_Vue插件丨vxetable初体验
weixin_39695701的博客
11-25 1877
今天终于解决了前端使用vue开发中遇到的路由，状态管理以及多模块跨域的问题。根据需求，项目中将用到很多的表格，基础表格(如基础数据展示等)以及树形表格(如导航数据展示等)。由于刚开始使用vue对其不是特别的熟悉，同时也是为了提高开发进度，所以选择了使用现有的插件，众多比对后选择了vxe-table插件。选择vxe-table的优势：可以自定义选择引入的模块，减少项目体积；多...
Vue集成报表系列教程9
qq_21779101的博客
06-09 2073
ActiveReportsJS Viewer 打印功能 ActiveReportJS Viewer 提供了打印按钮 ，当报表加载完成后，可点击打印按钮进行报表打印。 除此之外，Viewer提供了打印方法API。一键打印报表 ActiveReportsJS 提供了一键打印的 API ，即在不预览报表情况下，可以直接打印，代码示例: import{ Core } from"@grapecity/activereports"; constreport =newCore.Page...
Vue集成报表系列教程3
qq_21779101的博客
06-09 1225
前端参数传递
Vue集成报表系列教程2
qq_21779101的博客
06-09 948
在进行设计时会绑定一些测试数据用于查看报表的展示效果，但往往在实际的运行系统当中，报表数据会根据实际的业务产生的。所以我们就需要在运行时候再去为报表传递数据值。 为解决此类问题，可以将报表数据源类型设置为内嵌数据集，然后在加载报表时，将数据值传递。示例如下 1、实现代码 // Use Fetch API to set up the requesthttps://developer.mozilla.org/en-US/docs/Web/API/Fetch_API consthead...
若依框架（ruoyi vue版）集成jeecg积木报表详细开发过程（三）
weixin_53067723的博客
06-04 2554
若依框架集成积木报表的token权限控制
VUE报表开发
weixin_30807677的博客
08-20 2577
因为在项目中经常开发一些报表，并且业务、逻辑其实都有大部分的重复部分。 所以将这些常用的模块抽象出来、并且可视化操作。封装成一款报表开发工具。 先看一下项目的一些效果：数据单项绑定 可视化操作： 数据联动： 使用技术：vue全家桶 项目结构： │ App.vue #主要组件│ main.js│├─assets│ logo.png│├─axios #网络...
vue vuex echart 地图 报表
07-11
vue vuex echart 地图 报表 里面包含了 对百度地图搜索代码，其中还包含了 对 vuex的使用 可以供给需要的参考一二 ，不算好写的
vueelementuiexcel报表设计器插件
08-10
此插件 使用vue 基于element-ui，样式使用less语法，使用前应确保相关依赖已安装
database-front:VUE + ElementUI + Echarts 报表展示前端界面
05-11
数据库前 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test 有关工作原理的详细说明，请查看的和。
Vue-后台管理项目006---数据报表
初遇我ㄖ寸の热情呢？
07-08 960
【代码】Vue-后台管理项目006---数据报表。
vue+element 实现复杂数据报表
m0_59224033的博客
10-08 3562
vue+element表格组件实现中国式复杂数据报表
vue使用table实现动态数据报表（行合并）
m0_52769924的博客
10-10 593
【代码】vue使用table实现动态数据报表（行合并）
vue后台管理项目数据报表功能的实现
MissQ_coffee的博客
03-23 3293
首先在vue可视化管理面板中安装echarts运行依赖。 导入echarts。在使用echarts的组件中导入。 import echarts from 'echarts' 为echarts准备一个具备大小的Dom。 <div id="main" style="width: 600px;height:400px;"></div> 将页面上准备好的div区域初始...
Vue项目前端或后台实现导出报表
mrsun_web
12-06 4564
Vue项目前端或后台实现导出报表
Vue CRM项目开发指南及构建教程
虽然文件描述没有详细说明，但作为财务CRM系统，可能会包括账户管理、交易记录、报表生成、数据分析等金融行业特有的功能。Vue.js的响应式特性可以帮助实现这些功能的高效前端展示和交互。 8. Vue CLI工具 Vue CLI...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值