DataGear 数据可视化分析平台 http://datagear.tech 在6.0.0版本中重新实现了基于看板API-2.0的内置表格图表插件同样支持导出Excel/CSV/PDF功能。之前我们也写了介绍如何制作支持导出Excel/CSV/PDF的表格数据看板的文章但是在导出PDF时会出现中文乱码的问题本文的示例将支持导出中文PDF。6.0.0版本中基于看板API-2.0的内置表格图表插件默认也并未自带支持导出数据所需的JS依赖库需要手动下载在看板中引入。首先在图表管理模块添加一个表格图表注意图表类型中选择【API-2.0】范围下的【基本表格】。然后新建看板下载下述JS依赖库后上传为看板资源https://cdn.jsdelivr.net/npm/jszip3.10.1/dist/jszip.min.js https://cdn.jsdelivr.net/npm/pdfmake0.2.23/build/pdfmake.min.js https://cdn.jsdelivr.net/npm/pdfmake0.2.23/build/vfs_fonts.min.jslib/jszip3.10.1/jszip.min.js lib/pdfmake0.2.23/pdfmake.min.js lib/pdfmake0.2.23/vfs_fonts.min.jspdfmake.min.js和vfs_fonts.min.js仅在需要导出PDF时才需要。上述vfs_fonts.min.js是导出PDF时需要的字体库默认不支持中文需要替换为中文字体库。下面的链接中包含了中文字体库可以下载使用https://github.com/iizyd/SourceHanSansCN-TTF-Min/tree/main/dist/ttf-%E6%80%9D%E6%BA%90%E9%BB%91%E4%BD%93下载SourceHanSansSC-Regular.ttf字体文件后上传为看板资源lib/fonts/SourceHanSerifCN-Regular.ttf本文的示例中仅使用了SourceHanSansSC-Regular.ttf字体实际可以根据需要选择其他字体。最后在看板中引入导出所需的JS依赖库插入图表定义图表导出选项即可!DOCTYPEhtmlhtmlheadmetacharsetUTF-8title/titlescriptsrclib/jszip3.10.1/jszip.min.js/scriptscriptsrclib/pdfmake0.2.23/pdfmake.min.js/scriptscriptsrclib/pdfmake0.2.23/vfs_fonts.min.js/scriptstyletypetext/csshtml{height:100%;}*, ::after, ::before{box-sizing:border-box;}/stylescript//pdfMake要求字体库必须指定绝对路径varfontSchemawindow.location.href;fontSchemafontSchema.substring(0,fontSchema.lastIndexOf(/));varfonts{Roboto:{normal:fontSchema/lib/fonts/SourceHanSerifCN-Regular.ttf,bold:fontSchema/lib/fonts/SourceHanSerifCN-Regular.ttf,italics:fontSchema/lib/fonts/SourceHanSerifCN-Regular.ttf,bolditalics:fontSchema/lib/fonts/SourceHanSerifCN-Regular.ttf}};//替换默认字体pdfMake.setFonts(fonts);//表格导出选项vartableOptions{buttons:[{extend:csv,text:导出CSV,filename:csv},{extend:excel,text:导出Excel,filename:excel,title:null},{extend:pdf,text:导出PDF,filename:pdf,title:null},{extend:print,text:打印,title:Title}]};/script/headbodyh1styletext-align:center;DataGear 表格导出Excel/CSV/中文PDF/h1divstyleheight:80vh;dg-chart-widget【图表ID】dg-chart-optionstableOptions/div/body/html效果图如下所示官网地址http://datagear.tech文档地址http://datagear.tech/docs源码地址GitCodehttps://gitcode.com/datageartech/datagearGiteehttps://gitee.com/datagear/datagearGithubhttps://github.com/datageartech/datagear