DataTable配置pdfHtml5后PDF导出按钮不显示问题求助
问题根因
DataTable的pdfHtml5导出按钮不显示,是因为缺少PDF导出功能必须的依赖库。
你当前引入的JS资源仅覆盖了复制、打印、Excel导出的依赖:Excel导出依赖jszip.min.js,打印、复制功能不需要额外第三方依赖,但PDF导出必须加载pdfmake和对应的字体库文件,缺省情况下按钮初始化失败会被自动隐藏,不会渲染到页面。
修复步骤
- 先确认你的本地插件目录
plugins/table/datatable/button-ext/下存在pdfmake.min.js和vfs_fonts.js两个文件,如果没有需要先将这两个文件存入该目录,避免资源加载404。 - 在JS引入部分,在
buttons.html5.min.js之前加入这两个依赖的引入标签,调整后的完整JS引入顺序如下:
<script src="plugins/table/datatable/datatables.js"></script> <script src="plugins/table/datatable/button-ext/dataTables.buttons.min.js"></script> <script src="plugins/table/datatable/button-ext/jszip.min.js"></script> <!-- 新增PDF导出依赖 --> <script src="plugins/table/datatable/button-ext/pdfmake.min.js"></script> <script src="plugins/table/datatable/button-ext/vfs_fonts.js"></script> <script src="plugins/table/datatable/button-ext/buttons.html5.min.js"></script> <script src="plugins/table/datatable/button-ext/buttons.print.min.js"></script>
- 你现有的DataTable初始化配置中,PDF按钮的配置语法没有错误,不需要修改现有初始化代码,保存后刷新页面即可看到PDF导出按钮正常渲染。
内容的提问来源于stack exchange,提问作者Francisco S
相关产品推荐
相关产品推荐

