javascript - 无法使用 angularjs 正确打印表格

Question

我的应用程序中有一个包含动态数据的表，

这是我尝试打印表格的方法，

my controller

    $scope.printDiv = function (printable) {
        var printContents = document.getElementById(printable).innerHTML;
        var popupWin = window.open('', '_blank', 'width=300,height=300');
        popupWin.document.open();
        popupWin.document.write(printContents);
        popupWin.document.close();
    }

my table

        <table class="table table-bordered" id="printable">
            <thead>
                <tr class="bg-primary">
                    <th>Task Name</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Started BY</th>
                    <th>Priority</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="d in dataintbl | orderBy:sortType:sortReverse | filter:searchFish" ng-class="{'changecolor':(d.IsCompleted=='True')}">
                    <td><a href="#" style="cursor:pointer;" ng-click="showdetails(d)" data-toggle="modal" data-target="#myModalc">{{d.taskname}}</a></td>
                    <td>{{d.taskstartdate}}</td>
                    <td>{{d.taskenddate}}</td>
                    <td>{{d.startedby}}</td>
                    <td ng-class="{'greenrow': (d.taskpriority == 'Low'), 'yellowrow': (d.taskpriority == 'Medium'), 'redrow': (d.taskpriority == 'High')}">{{d.taskpriority}}</td>
                    <td>
                        <span ng-class="{'hidespan':(d.IsCompleted=='False')}">Completed</span>
                        <div ng-class="{'hidebutton':(d.IsCompleted=='True')}">

                            <a href="#" ng-click="updatetask(d)" data-toggle="modal" title="EDIT TASK" data-target="#myModalb" class="btn btn-warning glyphicon glyphicon-edit"></a>
                            <a href="#" ng-click="deleteuser(d)" title="DELETE TASK" class="btn btn-danger glyphicon glyphicon-trash"></a>
                            <a href="#" ng-click="taskcompleted(d)" title="COMPLETE TASK" class="btn btn-success glyphicon glyphicon-ok"></a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

但问题是这没有正确打印我的表格，并且无法为 div 提供正确的样式

我已经为此创建了一个jsfiddle，请在这里帮助我

here is my jsfiddle

我的主要问题是(这看起来不像表格，我的隐藏字段也在打印，我使用ng-class的字段，也显示错误数据)

请在这里帮助我，

Answer 1

我刚刚在 html 中更新了您的代码。我将整个表格放在 id="printable"的 div 中，因为 document.write() 方法没有获取表格标签，因此 printContents 对象在词法上变得不正确并被视为字符串。

<div ng-app="myapp" ng-controller="layout">
<div id="printable">
 <table >
<tr>
  <th>this one th</th>
  <th>this is second th</th>
  <th>third th</th>
</tr>
<tr>
  <td>first td</td>
  <td>second td</td>
  <td>third td</td>
    <td  ng-class="{'class':('hides'=='hide')}">hidden in ng-class</td>
  <td ng-hide="true">hidden td</td>
</tr>
<tr>
  <td>first td</td>
  <td>second td</td>
  <td>third td</td>
  <td ng-class="{'class':('hide'=='hide')}">hidden in ng-class</td>
  <td ng-hide="true">hidden td</td>
</tr>
</table>
</div>
<button ng-click="printDiv('printable');">Print Div</button>
</div>

http://jsfiddle.net/U3pVM/31141/

希望这个答案能解决您的问题。 :)