Inconsistent Data on multiple page printing on a printer

Question

Requirement

To print three(depends on the server response size) pages of print on one button click event.

Stored a barcode image an array, and loop through that array and bind the value to ctrl.barCodeImage. Then call the print service to print each bar code in different page. But it print always three same value that is the last value in the array.

It is a three separate pages with different bar code data in it.

This is the expected response

print 1

print 2

print 3

Current response is inconsistent. It will come all pages same value , which is the last value in that array.

Implementation Details:

Created an DOM, which will be printed each time with different value assigned to it.

 <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>

The print function which is getting called on the button click, added timeout to get assigned all the values on the print div.

 vm.print = function() {
            var res = [];
            var sampleId = [];
            var noTest = false;
            angular.forEach(vm.gridOptions.data, function(item) {
                if (item.sample != null) {
                    sampleId.push(angular.copy(item.sample.sampleId));
                }
            })    

            if(sampleId != null){
                 UserService.getInstitute(vm.user.instCode).then(function(response) {
                     vm.instCode = response.data.result.estName;
                 });

                 var userServicePromise =   UserService.printBarCodes(sampleId);
                 userServicePromise.then(function(response) {
                    if (response != null && response.data != null && response.data.result != null) {
                    response.data.result.forEach(function(entry) {

                         vm.barCodeImage = angular.copy(entry);
                          $timeout(function() {
                             PrintService.printElement("printThisElement");
                         }, 0);
                        }); 
                     } else {
                         toaster.error(response.data.message);
                     }
                 });
            }

                 }

    }

Print Service, which is used to print the DOM.

(function() {
 'use strict';
 angular.module('app.services')
  .factory('PrintService', PrintService);

 PrintService.$inject = [];

 function PrintService() {
  var service = {
   printElement: printElement
  };

  return service;



  function printElement(elem) {

   var printSection = document.getElementById('printSection');

   // if there is no printing section, create one
   if (!printSection) {
    printSection = document.createElement('div');
    printSection.id = 'printSection';
    document.body.appendChild(printSection);
   }
   var elemToPrint = document.getElementById(elem);
   // clones the element you want to print
   var domClone = elemToPrint.cloneNode(true);
   printSection.innerHTML = '';
   printSection.appendChild(domClone);
   window.print();
   window.onafterprint = function() {
       printSection.innerHTML = '';
   }
  };

 }
})();

Not able to figure out why it gives inconsistent print data on each time. I guess it might be synchronous issue. But most of the time it displays the last data in all three page of print.Thanks in advance.

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

Any HELP ?

Answer 1

I forked your plunker and I use a queue to allow multiple printing https://plnkr.co/edit/xZpcx6rCAUo9SemUPTt5?p=preview

I have a print function

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

And in PrintElement function i put in queu if printing is in progress :

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

At the end of printing run new printing with new data:

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

I hope this time you have that you want

Answer 2

The problem is that vm.barCodeImage is set before corresponding PrintService.printElement is actually executed. So the sequence is:

1. vm.barCodeImage = angular.copy(first entry);
2. vm.barCodeImage = angular.copy(second entry);
3. vm.barCodeImage = angular.copy(third entry);
4. PrintService.printElement("printThisElement");
5. PrintService.printElement("printThisElement");
6. PrintService.printElement("printThisElement");

The solution is to modify your code in the following way:

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

Thanks to that each call PrintService.printElement will use proper data and not the last element in the array.