如何在 mvc 应用程序的 Angular js 数据表中添加复制、pdf、excel 按钮答案

【问题标题】：how to add copy,pdf , excel buttons in angular js datatable in mvc application如何在 mvc 应用程序的 Angular js 数据表中添加复制、pdf、excel 按钮
【发布时间】：2019-01-03 18:07:19
【问题描述】：

我想在 angular js 中添加 excel、copy、pdf、打印按钮。但是在数据表中显示按钮时出现错误。数据表工作正常，但是当我添加按钮代码时，数据表不工作错误

未捕获的错误：[$injector:modulerr]

样式和js引用

  <script src="~/angularjs/jquery.js"></script>
    <script src="~/angularjs/jquery.dataTables.js"></script>
    <script src="~/angularjs/angular.min.js"></script>
    <script src="~/angularjs/angular-datatables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>

html

<div ng-app="MyApp" class="container">
                        <div ng-controller="homeCtrl">
                            <table id="entry-grid" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-hover"></table>
                        </div>
                    </div>

代码

var app = angular.module('MyApp', ['datatables']);
app.controller('homeCtrl', ['$scope', '$http', 'DTOptionsBuilder', 'DTColumnBuilder',
    function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
        $scope.dtColumns = [
            DTColumnBuilder.newColumn("timestamp", "Time"),
            DTColumnBuilder.newColumn("dataFrame", "data Frame"),
            DTColumnBuilder.newColumn("fcnt", "fcnt"),
            DTColumnBuilder.newColumn("freq", "freq"),
            DTColumnBuilder.newColumn("rssi", "rssi")
        ]

        $scope.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('ajax', {
            url: "/Manhole/GetManholeReadings",
            type: "POST"
            })
            .withButtons([
                'copy',
                'pdf',
                'excel'
            ])
        .withPaginationType('full_numbers')
        .withDisplayLength(10);

    }])

【问题讨论】：

标签： angularjs asp.net-mvc angular-datatables datatable-buttons

【解决方案1】：

您还需要包含datatables.buttons，即

var app = angular.module('MyApp', ['datatables', 'datatables.buttons']);

并在dom 中包含B 标志，即

$scope.dtOptions = DTOptionsBuilder.newOptions()
  ...
  .withOption('dom', 'Blfrtip')  //for a full featured datatable including buttons

【讨论】：