使用 .withButtons 将 Angular 数据表导出到 Excel：。看不到按钮答案

【问题标题】：Angular Data Table export to Excel using .withButtons:. Not able to see the buttons使用 .withButtons 将 Angular 数据表导出到 Excel：。看不到按钮
【发布时间】：2017-05-15 09:07:58
【问题描述】：

我正在尝试使用 angular datatables optionbuilder 创建用于下载 Excel 表格的按钮。但我收到错误 withButton is not a function。我已经下载了所有这些文件并包含在我的主 html 页面中。在 HTML 中

 <script src="/lib/angular-datatables.min.js"></script>
    <script src="/lib/js_button/dataTables.buttons.min.js"></script>
        <script src="/lib/js_button/buttons.flash.min.js"></script>
        <script src="/lib/js_button/jszip.min.js"></script>
          <script src="/lib/js_button/pdfmake.min.js"></script>
          <script src="/lib/js_button/vfs_fonts.js"></script>
          <script src="/lib/js_button/buttons.html5.min.js"></script>
          <script src="/lib/js_button/buttons.print.min.js"></script>
          <script src="/lib/angular-datatables.min.js"></script>
            <link rel="stylesheet" type="text/css" href="/lib/js_button/buttons.dataTables.min.css">

在控制器中

        var app = angular.module('myApp', ['Alertify','ngRoute', 'datatables']);
            app.controller('MainCtrl', function($scope, $http, $location, 
               DTOptionsBuilder, DTColumnBuilder,Alertify) {..
             $scope.vm.dtOptions = DTOptionsBuilder.newOptions()
                .withOption('order', [])
                .withOption('bFilter', false)
                .withOption('bSort', false)
                .withOption('bAutoWidth',true)
               .withOption('sScrollY' , "200")
               .withOption('sScrollX' , "100%")
               .withOption('bScrollCollapse' , true)
                .withPaginationType('full_numbers')
                .withOption('lengthMenu', [5, 10, 25, 50, 100, 150, 200])
                .withDOM('lrtip')
                .withButtons([
             {
                    extend: "excelHtml5",
                    filename: "MailItemList",
                    text: "<i class='fa fa-file-excel-o'></i>  Excel",
                    title: "Mail Item List",
                    exportOptions: {
                        columns:[2,3,4,5,6,7,8.9,10,11,12,13,14,15,16,17,18,19,20,21,22]
                    },
                    exportData: { decodeEntities: true }
             }
              ]);
        ..}

在 HTML 中

<table id="table1" class="table  table-bordered table-hover fixed" datatable="ng"  dt-columns="vm.dtColumns" dt-options="vm.dtOptions" >
        <thead id="theadstyle">

         <tr>

             <th class="alignstyle"> </th>
                <th class="alignstyle">1</th>
                <th class="alignstyle">2</th>
                <th class="alignstyle">3 </th>
                <th class="alignstyle">4 </th>
                <th class="alignstyle">5 </th>
                <th class="alignstyle">6</th>
                <th class="alignstyle">7 </th>
                <th class="alignstyle">8</th>
            </tr>
        </thead>
        <tbody >

            <tr ng-repeat="build in buildmodel1">

                <td> {{build.1}} </td>
                <td> {{build.2}} </td>
                <td> {{build.3}} </td>
                <td> {{build.4}} </td>
                <td> {{build.5}} </td>
                <td> {{build.6}} </td>
                <td> {{build.7}} </td>
               <td> {{build.8}} </td>

            </tr>
        </tbody>
    </table>

谁能解释一下这段代码还需要添加什么。

【问题讨论】：

将B 添加到dom，即.withDOM('Blrtip') ...
您好，我尝试更改 .但我仍然收到错误 DTOptionsBuilder.newOptions(...).withOption(...).withOption(...).withOption(...).withOption(...).withOption(...) .withOption(...).withOption(...).withPaginationType(...).withOption(...).withDOM(...).withButtons 不是函数
啧，我错过了你有一个错误，以为按钮只是没有出现
嗨，只添加 Blrtip 有效。 :) 我删除了 .withButtons 选项。我现在可以看到按钮了。但是，如果我只想显示 excel 按钮怎么办。

标签： angularjs angular-datatables

【解决方案1】：

将 B 添加到 dom，即 .withDOM('Blrtip') 将显示按钮。

错误“withButtons 不是函数”是因为缺少 js 文件 dataTables.buttons.min.js 或者，如果您处于角度状态，则未定义模块 datatable.buttons angular.module('app.components', [ ...,'datatables.buttons'] 有什么意见吗？

【讨论】：

欢迎来到 StackOverflow，请分享有关您的代码的更多详细信息。