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

您所在的位置:网站首页 数据可视化报表制作 DataGear 制作支持导出表格数据的数据可视化看板

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

2024-06-16 21:28| 来源: 网络整理| 查看: 265

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

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

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

DOCTYPE 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> /*自定义导出按钮样式*/ .dt-buttons button.dt-button{ padding: 0.2em 1em; color: green; }

效果图如下所示: 在这里插入图片描述



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3