jQuery DataTables添加Excel/Print按钮无法正常显示问题

问题表现 #

按官网初始化工具引入CDN资源、相关依赖并完成初始化配置后，配置的列显隐、分页长度选择、打印、Excel导出按钮未在页面正常展示。

存在问题的原有配置 #

脚本引入：

<script src="{{ URL::asset('vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ URL::asset('vendor/popper.js/umd/popper.min.js') }}"></script>
<script src="{{ URL::asset('vendor/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ URL::asset('vendor/js-datepicker/moment.min.js') }}"></script>
<script src="{{ URL::asset('vendor/js-datepicker/daterangepicker.js') }}"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" charset="utf8
    src="https://cdn.datatables.net/v/bs4/dt-1.12.1/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/r-2.3.0/datatables.min.js">
</script>

样式引入：

<link rel="stylesheet" href="{{ URL::asset('vendor/bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.12.1/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/r-2.3.0/datatables.min.css"/>

初始化代码：

$table = $('#client_search').DataTable( {
    responsive: true,
    dom: 'Bfrtip',
    buttons: [
        {extend:'colvis',text:'Show/Hide Columns'},
        'pageLength',
        'print',
        'excelHtml5',
    ]
} );
$("#client_search").width("100%");

依赖配置参考截图
按钮未显示的页面效果截图

修复步骤 #

• 修复语法错误：原datatables脚本标签的charset="utf8属性缺少闭合双引号，部分浏览器会出现属性解析异常导致脚本加载失败，补全引号即可。
• 补全缺失依赖：Excel导出功能强依赖JSZip库，原有配置仅在CSS的CDN路径中声明了jszip，JS侧未引入对应资源，会直接导致所有按钮初始化失败。在pdfmake相关脚本前加入JSZip引入：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>

• 对齐JS和CSS侧的CDN模块：原有引入的datatables JS包中未包含b-print打印模块、pageLength分页长度按钮对应的模块，和CSS侧加载的模块列表不匹配，部分功能未加载自然无法渲染按钮。将JS引入地址替换为和CSS模块完全一致的版本：

<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.12.1/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/r-2.3.0/datatables.min.js">
</script>

• 修正初始化时序：将DataTable初始化代码包裹在jQuery DOM加载完成回调中，避免DOM未渲染完成就执行初始化导致的渲染失败：

$(function() {
    const table = $('#client_search').DataTable( {
        responsive: true,
        dom: 'Bfrtip',
        buttons: [
            {extend:'colvis',text:'Show/Hide Columns'},
            'pageLength',
            'print',
            'excelHtml5'
        ]
    } );
    $("#client_search").width("100%");
})

• 样式冲突排查：以上操作完成后如果按钮仍不显示，打开浏览器开发者工具检查元素面板，确认按钮DOM是否已生成但被自定义样式隐藏，常见情况包括父元素设置overflow: hidden裁切了按钮、自定义CSS覆盖了按钮的display属性、层级不足被其他元素遮挡。

内容的提问来源于stack exchange，提问作者Quickee