在打印机上进行多页打印时数据不一致 [英] Inconsistent Data on multiple page printing on a printer

问题描述

要求

要在一个按钮单击事件上打印三页(取决于服务器响应大小).

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

将条形码图像存储在一个数组中，然后遍历该数组并将其值绑定到ctrl.barCodeImage.然后致电打印服务以在不同页面中打印每个条形码.但是它总是打印出三个相同的值，它们是数组中的最后一个值.

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.

这是预期的响应

打印1

打印2

打印3

当前响应不一致. 所有页面都将具有相同的值，这是该数组中的最后一个值.

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

实施细节:

创建了一个DOM，该DOM将在每次打印时分配不同的值.

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>

单击按钮将调用打印功能，添加了超时功能，可在打印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);
                     }
                 });
            }

                 }

    }

打印服务，用于打印DOM.

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.

在此处 https://plnkr.co/edit/jwoC0bNQJ9J92l5S8ZJJ?p=预览

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

有帮助吗?

推荐答案

我分叉了您的小汽车，并且使用队列允许多次打印 https://plnkr.co/edit/xZpcx6rCAUo9SemUPTt5?p=preview

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

我有打印功能

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

在PrintElement函数中，如果正在进行打印，我会进入队列:

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

我希望这次你有想要的

这篇关于在打印机上进行多页打印时数据不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！