Question

要求

在一个按钮点击事件上打印三个（取决于服务器响应大小）打印页面。

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

这是一个三个单独的页面，其中包含不同的条形码数据。

这是预期的回应

打印1

打印2

打印3

目前的反应不一致。它会显示所有页面相同的值，这是该数组中的最后一个值。

实施细则：

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

 <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上的所有值。

 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。

(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 = '';
   }
  };

 }
})();

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

在这里插入https://plnkr.co/edit/jwoC0bNQJ9J92l5S8ZJJ?p=preview

任何帮助？

Answer 1

我分叉你的plunker我使用队列允许多次打印 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函数中，如果正在进行打印，我会放入queu：

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

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

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

我希望这次你有你想要的

Answer 2

问题是在实际执行相应的0 96M 0 96M 3.4G 704M 6.5G 5.5G 640M 451.2M 6739 44.4m 0 0m 44.4m之前设置了vm.barCodeImage。所以顺序是：

vm.barCodeImage = angular.copy（first entry）;
vm.barCodeImage = angular.copy（第二个条目）;
vm.barCodeImage = angular.copy（第三个条目）;
PrintService.printElement（ “printThisElement”）;
PrintService.printElement（ “printThisElement”）;
PrintService.printElement（ “printThisElement”）;

解决方案是以下列方式修改代码：

PrintService.printElement

多亏每次调用$timeout(function() { vm.barCodeImage = angular.copy(entry); PrintService.printElement("printThisElement"); }, 0);将使用正确的数据，而不是数组中的最后一个元素。

打印机上多页打印的数据不一致

2 个答案: