Question

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格式。

Answer 1

您可以使用数据表。

HTML

<table id="tbl" style="width:100%">
<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
    </tr>
</tbody>

JS

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
} );

使表格更具互动性：

分页
水平滚动
订购（ASC 或 DESC）
行显示长度
输出 PDF 方向

更新了 JS

$(document).ready(function() {
    $('#test').DataTable({
        "aLengthMenu": [[3,5, 10, 25, -1], [3, 5, 10, 25, "All"]],
        "iDisplayLength": 3,
        "order": [],
        "scrollX": true,
        dom: 'Bfrtip',
        lengthMenu: [
            [ 10, 25, 50, -1 ],
            [ '10 rows', '25 rows', '50 rows', 'Show all' ]
        ],
        buttons: [
            'pageLength',
            {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                pageSize: 'LEGAL', 
            },
            'copy', 'excel' 
        
        ]
    } );
    
} );

将html表导出为excel / pdf

1 个答案:

将html表导出为ex​​cel / pdf

1 个答案:

将html表导出为excel / pdf