Question

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

这是我试图打印表的方式，

我的控制器

    $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();
    }

我的桌子

        <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更新了你的代码。我把整个表放在div中，id =＆＃34;可打印＆＃34;因为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/

希望这个答案可以解决您的问题。：）

无法使用angularjs正确打印表

1 个答案: