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

原创
2022/06/29 18:32
阅读数 1.4W

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

注意:导出表格数据功能需要DataGear 2.10.0+版本

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

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

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

https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.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

https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js

https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js

https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js

https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css

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

lib/
 |--buttons.dataTables.min.css
 |--dataTables.buttons.min.js
 |--jszip.min.js
 |--pdfmake.min.js
 |--vfs_fonts.js
 |--buttons.html5.min.js
 |--buttons.print.min.js

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

<!DOCTYPE html>
<html>
<head>
<link href="lib/buttons.dataTables.min.css" rel="stylesheet" />
<script src="lib/dataTables.buttons.min.js"></script>
<script src="lib/jszip.min.js"></script>
<script src="lib/pdfmake.min.js"></script>
<script src="lib/vfs_fonts.js"></script>
<script src="lib/buttons.html5.min.js"></script>
<script src="lib/buttons.print.min.js"></script>
<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="{dom:'Bt',buttons:[
    {extend:'csv',text:'导出CSV'},
    {extend:'excel',text:'导出Excel'},
    {extend:'pdf',text:'导出PDF'},
    {extend:'print',text:'打印'}]}"
  dg-chart-widget="..."></div>
</body>
</html>

效果图如下所示:

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
1 收藏
1
分享
返回顶部
顶部