Question

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/datatables.net-dt/css/jquery.dataTables.css",
    "../node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/popper.js/dist/umd/popper.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/jquery/dist/jquery.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",   
 ],

这是我为项目创建的angular-cli.json文件。

项目的组件如下所示;

ngOnInit() {
this.dtOptions = {
  pagingType: 'full_numbers',
  pageLength: 10,
  dom: 'Bfrtip',
  buttons: [
    'copy', 'print', 'csv','columnsToggle','colvis','pdf','excel']    
  };
  this.loadapi();
}

这里我从样本json创建了一个数据表。除了导出excel的按钮和pdf没有显示其他按钮在UI上显示外，每件事情都很好。可能是什么问题？

Answer 1

请按照以下步骤操作：

1：安装其依赖项：

npm install jszip --save
npm install datatables.net-buttons --save
npm install datatables.net-buttons-dt --save

2：在脚本和样式属性中添加依赖项：

    {
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              ...
              "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css"
            ],
            "scripts": [
              ...
              "node_modules/jszip/dist/jszip.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"
            ],
            ...
}

如果要具有excel导出功能，则必须在button.html5.js文件之前导入jszip.js。

3：HTML：

<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>

4：打字稿中的DtOptions：

        this.dtOptions = {
      dom: 'Bfrtip',
      // Configure the buttons
      buttons: [
        'copy',
        'print',
        'csv',
        'excel',
        'pdf'
      ]
    };

有关更多帮助，请参阅此link。

Answer 2

我遇到了类似的问题..但就我而言，没有一个按钮出现..因此，除了documentation中的其他步骤之外，

我必须将它们导入到我的特定文件中。（我只需要CSV按钮）

import 'datatables.net-buttons/js/buttons.colVis.min';
import 'datatables.net-buttons/js/dataTables.buttons.min';
import 'datatables.net-buttons/js/buttons.flash.min';
import 'datatables.net-buttons/js/buttons.html5.min';

希望有帮助！

与Angular集成的数据表不显示Excel，PDF等导出按钮

2 个答案: