Angular 5中DataTable的PDF与Excel按钮无法显示求助

我帮你梳理几个关键排查点，按步骤来应该能解决问题：

1. 先确认必需的依赖包是否安装齐全 #

DataTables的Excel和PDF按钮需要额外的依赖支持，你可能漏装了几个核心包。打开终端执行下面的安装命令：

npm install datatables.net-buttons datatables.net-buttons-excel datatables.net-buttons-pdf jszip pdfmake --save

• jszip是Excel导出的依赖，pdfmake是PDF导出的依赖，这两个缺一不可。

2. 检查.angular-cli.json的Scripts配置 #

你只贴了styles部分，但脚本文件的引入同样关键，而且顺序不能错。把这些脚本添加到scripts数组里（jQuery必须放在最前面）：

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/jszip/dist/jszip.min.js",
  "../node_modules/pdfmake/build/pdfmake.min.js",
  "../node_modules/pdfmake/build/vfs_fonts.js",
  "../node_modules/datatables.net/js/jquery.dataTables.js",
  "../node_modules/datatables.net-buttons/js/dataTables.buttons.js",
  "../node_modules/datatables.net-buttons/js/buttons.colVis.js",
  "../node_modules/datatables.net-buttons/js/buttons.flash.js",
  "../node_modules/datatables.net-buttons/js/buttons.html5.js",
  "../node_modules/datatables.net-buttons/js/buttons.print.js"
]

3. 优化dtOptions的按钮配置 #

你当前的按钮配置用的是简写，但Excel和PDF建议明确指定html5版本（因为旧的flash版本已经被浏览器淘汰了），修改后的配置如下：

dtOptions: any = {
  dom: "Bfrtp",
  buttons: [
    "colvis",
    "copy",
    "print",
    {
      extend: "excelHtml5",
      text: "Excel",
      title: "导出数据" // 可选，自定义导出文件的标题
    },
    {
      extend: "pdfHtml5",
      text: "PDF",
      title: "导出数据"
    }
  ]
};

4. 确认Angular模块的导入 #

如果你用的是angular-datatables官方封装模块，别忘了在对应组件的模块里导入Buttons模块：

import { DataTablesModule } from 'angular-datatables';
import { ButtonsModule } from 'angular-datatables/buttons';

@NgModule({
  imports: [
    // 其他已导入的模块
    DataTablesModule,
    ButtonsModule
  ]
})
export class YourFeatureModule { }

5. 检查样式文件是否完整引入 #

你的styles配置里截断了按钮样式的路径，确保完整引入按钮的样式文件：

"styles": [
  "../node_modules/font-awesome/css/font-awesome.css",
  "../node_modules/datatables.net-dt/css/jquery.dataTables.css",
  "../node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css", // 补全这个路径
  "styles/app.scss",
  "styles.scss"
]

最后，一定要重启你的Angular开发服务器（停止ng serve后重新启动），因为修改.angular-cli.json后需要重启才能让新的配置生效。

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