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

问题描述

要求

一键点击事件打印三页(取决于服务器响应大小)打印.

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

它是三个独立的页面，其中包含不同的条码数据.

这是预期的响应

打印 1

打印 2

打印 3

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

实施细节:

创建了一个 DOM，每次打印时都会分配不同的值.

在按钮单击时调用的打印函数，添加了超时以分配打印 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);$超时(功能(){PrintService.printElement("printThisElement");}, 0);});} 别的 {toaster.error(response.data.message);}});}}}

打印服务，用于打印DOM.

(function() {'使用严格';angular.module('app.services').factory('PrintService', PrintService);PrintService.$inject = [];功能打印服务(){无功服务 = {打印元素:打印元素};退货服务；功能打印元素(元素){var printSection = document.getElementById('printSection');//如果没有打印部分，则创建一个如果(！打印部分){printSection = document.createElement('div');printSection.id = 'printSection';document.body.appendChild(printSection);}var elemToPrint = document.getElementById(elem);//克隆要打印的元素var domClone = elemToPrint.cloneNode(true);printSection.innerHTML = '';printSection.appendChild(domClone);窗口.打印()；window.onafterprint = function() {printSection.innerHTML = '';}};}})();

无法弄清楚为什么每次都会给出不一致的打印数据.我想这可能是同步问题.但大多数情况下，它会显示所有三页打印中的最后一个数据.提前致谢.

戳这里https://plnkr.co/edit/jwoC0bNQJ9J92l5S8ZJJ?p=preview

有什么帮助吗?

解决方案

我分叉了你的 plunker，我使用了一个队列来允许多次打印https://plnkr.co/edit/xZpcx6rCAUo9SemUPTt5?p=preview

我有打印功能

function print(data) {var domClone = '<div id="printThisElement" class="onlyprint" >'+'<表>'+''+'<td>{{ data.instCode }}</td>'+'<td align="center">{{ data.date}} </td>'+'</tr>'+''+'<td colspan="2" align="center"><img ng-src="data:image/JPEG;base64,{{data.barCodeImage}}"></td>'+'</tr>'+''+'<td colspan="2" align="center">{{ ctrl.user.name }} </td>'+'</tr>'+''+'<td >Reg Id: {{ data.regIdLookup }}</td>'+'<td align="center">{{ data.testName }}</td>'+'</tr>'+'</表>'+'</div>'printSection.innerHTML = '';var scope = $rootScope.$new();scope.data = 数据；var domTemp = $compile(domClone)(scope)[0];printSection.appendChild(domTemp);$超时(功能(){onPrintFinished(window.print());}, 0);}

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

if(!printInProgress) {打印进度 = 真；打印(数据)}别的 {队列推送(数据)；}

在打印结束时使用新数据运行新打印:

function onPrintFinished (printed){var next = queue.shift();如果(下一个){控制台日志(下一个，队列)；$超时(功能(){打印(下一个)；});}别的 {打印进度 = 假；}}

希望这次有你想要的

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 ?

解决方案

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

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