与 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表格,然后输入账号密码,可以登陆编辑,也可以导出,这叫啥技术