DataGear 制作支持导出表格数据的数据可视化看板 |
您所在的位置:网站首页 › 数据可视化报表制作 › DataGear 制作支持导出表格数据的数据可视化看板 |
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 |