【发布时间】：2017-05-18 12:03:19
【问题描述】：
JSP 文件
<div class="row" ng-controller="dataExportCtrl">
<div class="col-md-12">
<h4 class="blue ">Search Result</h4>
<div id="tableToExport" class="table-responsive mt10">
<table class="table table-hover " id="table-grid">
<thead>
<tr>
<th>Client</th>
<th>Production vs Workplace</th>
<th>Rule type</th>
<th>SynID and description</th>
<th>Message</th>
<th>Notes</th>
<th>Release date</th>
<th>Checked-out by</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ruleData in ctrl.ruleDataList">
<td>{{ruleData[7]}}</td>
<td>Suspendisse ut scelerisque<br>Aeneann pulvinar lectus.<br>pulvinar lectus.</td>
<td>{{ruleData[24]}}</td>
<td>{{ruleData[5]}} <br> {{ruleData[2]}}</td>
<td>{{ruleData[3]}}</td>
<td>{{ruleData[4]}}</td>
<td>20 Oct 22:30</td>
<td>Editor name01<br>20 Oct 22:30</td>
<td>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><span aria-hidden="true" class="glyphicon glyphicon-cog"></span>
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li ng-click="editRule(ruleData)"><a href="#"><span aria-hidden="true" class="glyphicon glyphicon-eye-open"></span> View / Edit</a></li>
<li><a href="#"><span aria-hidden="true" class="glyphicon glyphicon-log-in"></span> Check out</a></li>
<li><a href="#"><span aria-hidden="true" class="glyphicon glyphicon-share-alt"></span> Undo check-out</a></li>
<li><a href="#"><span aria-hidden="true" class="glyphicon glyphicon-check"></span> Check in</a></li>
<li ng-click="deleteSearchResult($index,ruleData[23])"><a href="#"><span aria-hidden="true" class="glyphicon glyphicon-trash"></span> Delete</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="clearfix"></div>
<div class="col-sm-12 mt20 text-right">
<button type="button" class="btn btn-labeled btn-info" ng-click="exportToExcel('#tableToExport')"> Export
<span class="btn-label"><i class="icon-append fa fa-file-excel-o"></i></span></button>
</div>
</div>
Js 文件
app.factory('Excel',function($window){
var uri='data:application/vnd.ms-excel;base64,',
template='<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64=function(s){return $window.btoa(unescape(encodeURIComponent(s)));},
format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];})};
return {
tableToExcel:function(tableId,worksheetName){
var table=$(tableId),
ctx={worksheet:worksheetName,table:table.html()},
href=uri+base64(format(template,ctx));
return href;
}
};
})
.controller('dataExportCtrl',function(Excel,$timeout,$scope){
$scope.exportToExcel=function(tableId){ // ex: '#my-table'
var exportHref=Excel.tableToExcel(tableId,'Searched Rule Data');
$timeout(function(){location.href=exportHref;},100); // trigger download
}
});
现在一切正常，我可以在 excel 中导出表格内容，但它们没有排序，而且它包括弹出按钮（查看、编辑和全部）。我不想要它们。已附上 Excel 文件快照链接 Excel 快照：http://tinypic.com/r/14vgv2d/9
这就是我们按下编辑按钮时 UI 的外观。 http://tinypic.com/r/hwajcg/9。 现在我想要的只是在单击导出按钮时将没有编辑按钮内容的表格提取为 excel 或 pdf 格式。
【问题讨论】：
-
与其从头开始，不如使用像 github.com/hhurz/tableExport.jquery.plugin 这样的现有插件？
-
我从未使用过 git 的插件。我不知道如何使用它，而且使用插件也不是团队要求。但是你能解释一下如何从头开始使用这个插件吗？
-
这个文档记录得很好。去读吧:)。基本上，您所要做的就是下载文件，将它们放在您的项目 js 文件夹中，在您的代码中引用它并按照说明进行操作。试试看！甚至都有制作的样品！
-
好的，我试试看。你可以在上面的代码中提出一些建议，以便我可以从我的 excel 中排除按钮
-
@PierreBurton 在哪里使用选项（默认设置）？
标签： javascript html angularjs