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

问题描述

样式":["../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",样式.css"],脚本":["../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',页长:10，dom: 'Bfrtip',纽扣: ['复制'、'打印'、'csv'、'columnsToggle'、'colvis'、'pdf'、'excel']};this.loadapi();}

在这里，我从示例 json 创建了一个数据表.除了导出excel和pdf的按钮没有显示其他按钮显示在UI上之外，一切都很好.可能是什么问题?

解决方案

请按照以下步骤操作:

1:安装其依赖项:

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

2:在scripts和styles属性中添加依赖:

<代码> {项目":{您的应用名称":{建筑师":{建造": {选项": {风格":[...node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css"],脚本":[..."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导出功能，那么你必须在buttons.html5.js文件之前导入jszip.js.

3:HTML:

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

4:Typescript 中的 DtOptions:

 this.dtOptions = {dom: 'Bfrtip',纽扣: ['复制'，'打印'，'.csv','优秀','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屋！