angular js文件保护程序用于从datatable导出

时间:2018-05-14 11:18:15

标签: javascript jquery angularjs filesaver.js

我使用了下面的文件保护程序

bower安装angular-file-saver --save

for已经在下面的代码中传递了json字符串,而不是像下面那样获取innerhtml,

$scope.items = [{
    name: "John Smith",
    email: "j.smith@example.com",
    dob: "1985-10-10"
  }, {
    name: "Jane Smith",
    email: "jane.smith@example.com",
    dob: "1988-12-22"
  }];

但它不起作用并在导出文件的单列中打印json字符串

 var blob = new Blob([document.getElementById('exportable').innerHTML], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
            });
            FileSaver.saveAs(blob, "Report.xls");

我的数据表的html代码是

<div class="col-md-12">
            <div id='exportable' ng-controller="getDataTable as showCase">
                <table class="table table-bordered" datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="row-border hover"></table>
            </div>
        </div>

我在&#34;可出口&#34;中使用数据表ID

如何使用文件保护程序和数据表导出到Excel?

这里使用datatble导出页面选择和分页,我只想表

任何人都可以帮我解决它

1 个答案:

答案 0 :(得分:1)

首先在html中创建两个div,如下所示,并创建一个链接:

   <a ng-click="exportDataInExcel()">Export</a>
    <div class="col-md-12">
       <div ng-controller="getDataTable as showCase">
          <table class="table table-bordered" datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="row-border hover"></table>
        </div>
    </div>
<div class="col-md-12" hidden>
       <div ng-controller="getDataTable as showCase" id='exportable'>
          <table class="table table-bordered" datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="row-border hover"></table>
        </div>
    </div>

和int你的控制器创建一个如下函数:

$scope.exportDataInExcel = function(){
    var blob = new Blob([document.getElementById('exportable').innerHTML],{
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
    });
    FileSaver.saveAs(blob, "Report.xls");
}