PDFまたはプリンタへのng-repeat CSSのアラインメントの問題が考えられます

Question

AngularJSを使用して印刷するチケットを作成しています。私は1000枚のチケットを作成しようとしており、最初のチケットから最後のチケットまで約5ピクセルのオフセットがあります。今私は自分のコードを誤解していたので、出力が同じではないことに気づいた。私はそれが国境がどのように扱われるかもしれないと信じていますが、わかりません。

場合NG-繰り返すクラスticketNoを開始し、私はこれらの2クラス1000枚のチケットに達するとticketNoR両方が2つの画素

によってそこに対して親（NG反復）の下の境界を超えるさは今や上記2つの画素であります親要素の下の境界線。

結果はChromiumとFirefoxによって異なりますが、常にオフセットがあります。そして、どこから来たのかわかりません。

これは私のコードで、私はフィドルが問題を再現しないことに気付きました。私は印刷と自動切断のためにこのオフセットを取り除く必要があります。

どこから来たのでしょうか？

var ticket = angular.module('ticket', []); 
 

 
ticket.controller('ticketCtrl', function($scope, $http){ 
 
$scope.ticketQty = 1000; 
 
$scope.tickets = []; 
 
$scope.pad = "000000"; 
 
$scope.ticketNo = 3000; 
 

 
for (var i=0; i< $scope.ticketQty; i++){ 
 
    var str = "" + $scope.ticketNo; 
 
\t var ticketNum = $scope.pad.substring(0, $scope.pad.length - str.length) + (i+parseInt($scope.ticketNo)); 
 
\t $scope.tickets[i] = ticketNum ; 
 

 
} 
 
    });

.ticket-border{ 
 
\t position:relative; 
 
\t width:800px; 
 
\t height:200px; 
 
\t border-top:2px solid #4eb610; 
 
    border-bottom:2px solid #4eb610; 
 
    page-break-inside: avoid; 
 
    margin:10px; 
 
} 
 

 
.tikNo{ 
 

 
    \t transform-origin: left top 0; 
 
    \t position:absolute; 
 
    \t left:50px; 
 
    \t height:50px; 
 
    width:200px; 
 
    text-align:center; 
 
    word-wrap: break-word; 
 
    font-family: monospace; 
 
    white-space: pre; 
 
    transform: rotate(90deg); 
 
    background-color: #4eb610 !important; 
 
    font-weight: 900; 
 
    font-size: 25px; 
 
    line-height: 60px; 
 
    color:#fff !important; 
 
    -webkit-print-color-adjust: exact !important; 
 
    margin:0px; 
 

 
    } 
 

 
.tikNoR{ 
 
    \t transform-origin:right top 0; 
 
    \t position:absolute; 
 
    \t right:50px; 
 
    \t height:50px; 
 
    width:200px; 
 
    text-align:center; 
 
    word-wrap: break-word; 
 
    font-family: monospace; 
 
    white-space: pre; 
 
    transform: rotate(270deg); 
 
    background-color: #4eb610 !important; 
 
    font-weight: 900; 
 
    font-size: 25px; 
 
    line-height: 60px; 
 
    color:#fff !important; 
 
    -webkit-print-color-adjust: exact !important; 
 
    } 
 

 
.tikNoDot{ 
 
    position:absolute; 
 
    top:85px; 
 
    left:35px; 
 
    border-radius:15px; 
 
    height:30px; 
 
    width:30px; 
 
    background-color:#fff !important; 
 
    -webkit-print-color-adjust: exact !important; 
 
    z-index: 1; 
 
} 
 
.tikNoDotR{ 
 
    position:absolute; 
 
    top:85px; 
 
    right:35px; 
 
    border-radius:15px; 
 
    height:30px; 
 
    width:30px; 
 
    background-color:#fff !important; 
 
    -webkit-print-color-adjust: exact !important; 
 
    z-index: 1; 
 
} 
 

 
.ticketLeftSide{ 
 
    position:absolute; 
 
    top:0px; 
 
    left:55px; 
 
    width:540px; 
 
    height:198px; 
 
    border-right:2px dashed #4eb610; 
 
    z-index: 2; 
 

 
} 
 

 
.ticketRightSide{ 
 
    transform-origin: right top 0; 
 
    position:absolute; 
 
    top:10px; 
 
    right:0px; 
 
    width:180px; 
 
    height:160px; 
 
    left:400px; 
 
    z-index: 2; 
 
    line-height: 25px; 
 
    text-align:left; 
 
    word-wrap: break-word; 
 
    font-family: monospace; 
 
    font-size:10px; 
 
    white-space: pre; 
 
    transform: rotate(270deg); 
 
     
 
} 
 

 
body 
 
{ 
 
    margin:0px; 
 
} 
 

 

 
.price{ 
 
float:right; 
 
    border :2px solid #4eb610; 
 
    border-radius:15px; 
 
    height:75px; 
 
    width:75px; 
 
    margin:10px; 
 
    text-align:center; 
 
    line-height: 75px; 
 
    font-weight: 900; 
 
    font-size: 35px; 
 
    font-family: monospace; 
 
    clear:both; 
 

 
} 
 

 

 

 
.headline{ 
 
    position:absolute; 
 
    top:5px; 
 
    left:5px; 
 
    width:445px; 
 
    height:150px; 
 
    text-align: center; 
 
    font-weight:900; 
 
    font-size: 25px; 
 
} 
 

 
.datetirage{ 
 
    position:absolute; 
 
    top:100px; 
 
    width:445px; 
 
    text-align: center; 
 
    border-top :2px solid #4eb610; 
 
    border-bottom :2px solid #4eb610; 
 
    font-weight:100; 
 
font-size: 15px; 
 
} 
 

 
.disclaimer{ 
 
    position:absolute; 
 
    bottom:0px; 
 
    height:50px; 
 
    width:445px; 
 
    text-align: center; 
 
    
 
    font-weight:100; 
 
font-size: 13px; 
 
} 
 
.logoImg{ 
 
    height: 60px; 
 
} 
 

 

 
.webprint{ 
 

 
    font-size:20px; 
 
    font-weight:400; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="ticket" ng-controller="ticketCtrl"> 
 
<div ng-repeat="ticket in tickets" class="ticket-border"> 
 
<div class="tikNo">{{ticket}}</div> 
 
<div class="tikNoDot"></div> 
 
<div class="ticketLeftSide"> 
 
\t <div class="price">1$</div> 
 
\t <div class="headline">Headline<br></div> 
 
\t <div class="datetirage">Date Time</div> 
 
\t <div class="disclaimer">Disclaimer</div> 
 
</div> 
 
<div class="ticketRightSide"> \t 
 
nom:___________________________ 
 
prénom:________________________ 
 
Tel:___________________________ 
 
Courriel:_____________________@ 
 
_______________________________ 
 
</div> 
 
<div class="tikNoR">{{ticket}}</div> 
 
<div class="tikNoDotR"></div> 
 
</div> 
 
</div>

Answer 1

問題はCSSボーダーによって引き起こされます。 @media printを使用して境界線の太さで再生できます。

バーコードを生成するときに同様の問題がありました。下の境界線は、クロムやFirefoxから印刷するときは常にバーコード自体に重なっていましたが、IEでいつも働いていました。また、IEを試して、それがあなたのために働くかどうか見ることができます。