inkonsistente Daten auf mehreren Seiten auf einem Drucker

Question

Anforderung

drucken drei Seiten von Druck auf einen Knopf klicken Ereignis (auf dem Server Antwortgröße abhängt).

Gespeichert ein Barcode-Bild ein Array und Schleife durch das Array und binden Sie den Wert an ctrl.barCodeImage. Rufen Sie dann den Druckdienst an, um jeden Barcode auf einer anderen Seite zu drucken. Es wird jedoch immer derselbe Wert gedruckt, der der letzte Wert im Array ist.

Es handelt sich um drei separate Seiten mit unterschiedlichen Barcode-Daten.

Dies ist die erwartete Antwort

Druck 1

drucken 2

drucken 3

Die aktuelle Antwort ist inkonsistent. Es werden alle Seiten denselben Wert haben, der der letzte Wert in diesem Array ist. Einzelheiten

Umsetzung:

einen DOM Erstellt, die jedes Mal gedruckt werden, mit unterschiedlichem Wert zugewiesen.

<div id="printThisElement" class="onlyprint" > 
    <table> 
    <tr> 
     <td>{{ ctrl.instCode }}</td> 
     <td align="center">{{ ctrl.date | dateDisplayFilter}} </td> 
    </tr> 
    <tr> 
     <td colspan="2" align="center"> <img ng-src="data:image/JPEG;base64,{{ctrl.barCodeImage}}"> </td> 
    </tr> 
    <tr> 
     <td colspan="2" align="center">{{ ctrl.user.name }} </td> 
    </tr> 
     <tr> 
     <td >Reg Id: {{ ctrl.regIdLookup }}</td> 
     <td align="center">{{ ctrl.testName }}</td> 
    </tr> 

    </table> 
    </div> 

Die Druckfunktion, die auf den Button klicken aufgerufen wird immer hinzugefügt Timeout alle Werte auf dem Druck div zugewiesen zu bekommen.

Druckdienst, der zum Drucken des DOM verwendet wird.

Nicht in der Lage herauszufinden, warum es zu jedem Zeitpunkt inkonsistente Druckdaten gibt. Ich denke, es könnte ein synchrones Problem sein. Aber die meiste Zeit zeigt es die letzten Daten in allen drei Seiten von print.Thanks im Voraus.

Plunk hier https://plnkr.co/edit/jwoC0bNQJ9J92l5S8ZJJ?p=preview

Hilfe?

Answer 1

Das Problem ist, dass vm.barCodeImage gesetzt wird, bevor entsprechende PrintService.printElement tatsächlich ausgeführt wird. Die Reihenfolge lautet also wie folgt:

1. vm.barCodeImage = angular.copy (erster Eintrag);
2. vm.barCodeImage = angular.copy (zweiter Eintrag);
3. vm.barCodeImage = angular.copy (dritter Eintrag);
4. PrintService.printElement ("printThisElement");
5. PrintService.printElement ("printThisElement");
6. PrintService.printElement ("printThisElement");

Die Lösung ist der Code in der folgenden Art und Weise zu ändern:

$timeout(function() { 
    vm.barCodeImage = angular.copy(entry); 
    PrintService.printElement("printThisElement"); 
}, 0); 

Dank, dass jeder Anruf PrintService.printElement richtige Daten verwendet und nicht das letzte Element in der Anordnung.

Answer 2

gegabelt ich Ihre Plunker und ich verwende eine Warteschlange mehr Druck Ich habe in queu https://plnkr.co/edit/xZpcx6rCAUo9SemUPTt5?p=preview

Ich habe eine Druckfunktion

function print(data) { 
var domClone = '<div id="printThisElement" class="onlyprint" >'+ 
    '<table>'+ 
    '<tr> '+ 
     '<td>{{ data.instCode }}</td>'+ 
     '<td align="center">{{ data.date}} </td>'+ 
    '</tr>'+ 
    '<tr> '+ 
     '<td colspan="2" align="center"> <img ng-src="data:image/JPEG;base64,{{data.barCodeImage}}"> </td>'+ 

    '</tr>'+ 
    '<tr> '+ 
     '<td colspan="2" align="center">{{ ctrl.user.name }} </td>'+ 
    '</tr>'+ 
     '<tr> '+ 
     '<td >Reg Id: {{ data.regIdLookup }}</td>'+ 
     '<td align="center">{{ data.testName }}</td>'+ 
    '</tr>'+ 

    '</table>'+ 
'</div>' 
printSection.innerHTML = ''; 
    var scope = $rootScope.$new(); 
    scope.data = data; 
    var domTemp = $compile(domClone)(scope)[0]; 
    printSection.appendChild(domTemp); 
$timeout(function(){ 
    onPrintFinished(window.print()); 
}, 0); 
} 

Und in PrintElement Funktion zu ermöglichen, wenn der Druck im Gang ist:

if(!printInProgress) { 
printInProgress = true; 
print(data) 
} 
else { 
    queue.push(data); 
} 

Am Ende des Druckvorgangs neues Drucken mit neuen Daten:

function onPrintFinished (printed){ 
var next = queue.shift(); 
if(next) { 
    console.log(next, queue); 
    $timeout(function() { 
    print(next); 
}); 
} 
else { 
    printInProgress = false; 
} 
} 

Ich hoffe, dieses Mal haben Sie, dass Sie