DataGear 5.3.0 制作支持导出表格数据的数据可视化看板

DataGear 内置表格图表底层采用的是DataTable表格组件,默认并未引入导出数据的JS支持库,如果有导出表格数据需求,则可以在看板中引入导出相关JS支持库,制作具有导出CSV、Excel、PDF功能的表格数据看板。

在新发布的5.3.0版本中,对表格功能进行了改进,在制作具有导出功能表格的看板时,仅需要引入jszip.jspdfMake.jsvfs_fonts.js库即可。

如果不需要导出PDF,则不需要引入pdfMake.jsvfs_fonts.js

首先,新建表格图表看板,例如:

html 复制代码
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="display:inline-block;width:100%;height:500px;"
  dg-chart-widget="..."></div>
</body>
</html>

然后,下载如下导出JS支持库:

https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js

https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js(仅导出PDF时需要)

https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js(仅导出PDF时需要)

并将它们上传为看板资源,例如:

复制代码
lib/
 |--jszip.min.js
 |--pdfmake.min.js (仅导出PDF时需要)
 |--vfs_fonts.js (仅导出PDF时需要)

最后,在看板中引入上述JS库,配置表格图表导出按钮即可,例如:

html 复制代码
<!DOCTYPE html>
<html>
<head>
<script src="lib/jszip.min.js"></script>
<script src="lib/pdfmake.min.js"></script> <!--仅导出PDF时需要-->
<script src="lib/vfs_fonts.js"></script> <!--仅导出PDF时需要-->
<style>
/*自定义导出按钮样式*/
.dt-buttons button.dt-button{
  padding: 0.2em 1em;
  color: green;
}
</style>
</head>
<body>
<div style="display:inline-block;width:100%;height:500px;"
  dg-chart-options="{buttons:[
    {extend:'csv',text:'导出CSV'},
    {extend:'excel',text:'导出Excel'},
    {extend:'pdf',text:'导出PDF'}, /*仅导出PDF时需要*/
    {extend:'print',text:'打印'}]}"
  dg-chart-widget="..."></div>
</body>
</html>

效果图如下所示:

使用下面的dg-chart-options可以自定义导出/打印标题、文件名

javascript 复制代码
{
  buttons:[
    {extend:'csv',text:'导出CSV', filename: 'csv'},
    {extend:'excel',text:'导出Excel', filename: 'excel', title: null},
    {extend:'pdf',text:'导出PDF', filename: 'pdf', title: null}, /*仅导出PDF时需要*/
    {extend:'print',text:'打印', title: 'Title'}]
}

官网地址:

http://www.datagear.tech

源码地址:

Gitee:https://gitee.com/datagear/datagear

Github:https://github.com/datageartech/datagear

GitCode:https://gitcode.com/datageartech/datagear

相关推荐
GIS开发特训营34 分钟前
【智慧城市】2025年中国地质大学(武汉)暑期实训优秀作品(2):智慧城市西安与一带一路
人工智能·信息可视化·智慧城市
大翻哥哥2 小时前
Python地理空间数据分析:从地图绘制到智能城市应用
开发语言·python·数据分析
weixin_490354342 小时前
Vue设计与实现
前端·javascript·vue.js
GISer_Jing3 小时前
React过渡更新:优化渲染性能的秘密
javascript·react.js·ecmascript
烛阴3 小时前
带你用TS彻底搞懂ECS架构模式
前端·javascript·typescript
wayhome在哪4 小时前
3 分钟上手!用 WebAssembly 优化前端图片处理性能(附完整代码)
javascript·性能优化·webassembly
web前端1235 小时前
# 多行文本溢出实现方法
前端·javascript
人间观察员5 小时前
如何在 Vue 项目的 template 中使用 JSX
前端·javascript·vue.js
EndingCoder5 小时前
安装与环境搭建:准备你的 Electron 开发环境
前端·javascript·electron·前端框架
Lucky_Turtle5 小时前
【electron】一、安装,打包配置
javascript·arcgis·electron