与Angular集成的数据表未显示导出按钮，例如Excel，PDF [英] Data table integrated with Angular not showing export buttons such as Excel, PDF

问题描述

"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上显示.可能是什么问题?

解决方案

请按照以下步骤操作:

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',
      buttons: [
        'copy',
        'print',
        'csv',
        'excel',
        'pdf'
      ]
    };

有关更多帮助，请参见此链接.

"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",   
 ],

This is the angular-cli.json I have created file for my project.

Component for the project looks like this;

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

Here I have created a datatable from a sample json. Every thing was fine except the button to export excel and pdf didn't show other buttons are showing on UI. What may be the issue?

解决方案

Please Follow steps:

1: Install its dependencies:

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

2:Add the dependencies in the scripts and styles attributes:

    {
  "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"
            ],
            ...
}

If you want to have the excel export functionnality, then you must import the jszip.js before the buttons.html5.js file.

3:HTML:

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

4:DtOptions in Typescript:

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

For more help refer this link.

这篇关于与Angular集成的数据表未显示导出按钮，例如Excel，PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！