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

Posted

技术标签:

【中文标题】与 Angular 集成的数据表不显示 Excel、PDF 等导出按钮【英文标题】:Data table integrated with Angular not showing export buttons such as Excel, PDF 【发布时间】:2018-08-25 14:46:33 【问题描述】:
"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】:

请按照以下步骤操作:

1:安装其依赖项:

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

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

    
  "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导出功能,那么你必须在buttons.html5.js文件之前导入jszip.js。

3:HTML:

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

4:Typescript 中的DtOptions:

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

如需更多帮助,请参阅此link。

【讨论】:

功能完美..!【参考方案2】:

我遇到了类似的问题.. 但在我的情况下,没有任何按钮出现.. 所以,除了 https://l-lin.github.io/angular-datatables/#/extensions/buttons 中的其他步骤之外,

我必须将它们导入到我的特定文件中。(我只需要 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';

希望有帮助!

【讨论】:

哪个具体文件?我也面临同样的问题。【参考方案3】:

我遇到了同样的问题。这可能是因为您还使用了页面长度。

试试这个:

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

这也有效,但看起来您并没有真正对页面长度做了很多工作(就允许更改长度而言),因此它可能不适合您。但是,它可能对其他人有用:

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

你有更多选择,但这两个是我能想到的最简单的。

来源:https://datatables.net/reference/button/pageLength

【讨论】:

以上是关于与 Angular 集成的数据表不显示 Excel、PDF 等导出按钮的主要内容,如果未能解决你的问题,请参考以下文章

如何将 Laravel 5.4 与 Angular 4 集成

网页在线excel表格,然后输入账号密码,可以登陆编辑,也可以导出,这叫啥技术

angular.js 与 apache kafka 的集成

Angular 6 的报告框架

配置 nz-table 表单页脚总页数与条数显示 - Angular

将 Firebase 管理员与 Angular 4 项目集成