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

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

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

如果不需要导出PDF，则不需要引入pdfMake.js、vfs_fonts.js库

首先，新建表格图表看板，例如：

<!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库，配置表格图表导出按钮即可，例如：

<!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可以自定义导出/打印标题、文件名

{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'}]
}