2016-09-23 27 views
1

使用引導程序打印記錄數大於53的預標籤時,我遇到了困難,而且我總是在打印預覽中獲得空白頁面。但是,如果記錄小於52,那麼我可以成功打印。請參閱下面的代碼。如果使用引導程序,HTML預標籤打印額外的行

<html ng-app="appMain"> 
<head> 
    <script src="lib/angular.js"></script> 
    <script src="lib/moment.js"></script> 
    <script src="js/app.js"></script> 
    <link rel="stylesheet" href="css/bootstrap.css?v3.3"> 
</head> 
<body> 
    <div ng-controller='ctrlMain'>    
     <table> 
      <tr>     
       <td><button ng-click="fnPrintXMLData()"> Print </button></td> 
      </tr> 
     <table> 
     <label>test label</label> 
     <div class="clearfix">&nbsp;</div>       
     <span ng-show="message.id"><h4>Detail Message</h4></span> 
     <div class="clearfix">&nbsp;</div> 
     <pre class="printDisplayBox" style="white-space: pre-wrap; word-break: normal;"> 
     1 
     2 
     3 
     4 
     5 
     6 
     7 
     8 
     9 
     10 
     11 
     12 
     13 
     14 
     15 
     16 
     17 
     18 
     19 
     20 
     21 
     22 
     23 
     24 
     25 
     26 
     27 
     28 
     29 
     30 
     31 
     32 
     33 
     34 
     35 
     36 
     37 
     38 
     39 
     40 
     41 
     42 
     43 
     44 
     45 
     46 
     47 
     48 
     49 
     50 
     51 
     52 
     53 
     54 
     55 
     </pre> 
    </div> 
</body> 

,並在控制器

appMain.controller('ctrlMain', ['$scope', function($scope) { 
$scope.fnPrintXMLData = function() { 
    window.print(); 
};}]); 

當我打印的結果是這樣的: Printing with bootstrap 如果我註釋掉「」或記錄計數小於52,則結果是好的這是 Printing without bootstrap

任何人都可以請幫我在這個? 非常感謝。

回答

0

您的HTML:

<pre class="printDisplayBox" style="white-space: pre-wrap;word-break: normal;width: 100%;display: -webkit-inline-box !important;"> 
+0

哇,它工作得很好,你能不能給我解釋一下?非常感謝。 – user2428424

+0

@ user2428424 sry我無法解釋,我真的不明白,哈哈哈哈......我只是在努力。 –