Question

 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) { //three values in the array, iteraring three times.
                     $timeout(function() {
                        vm.barCodeImage = angular.copy(entry); 
                          $timeout(function() {
                             PrintService.printElement("printThisElement"); // display one value three times
                         }, 1);
                         }, 2);
                        }); 
                     } else {
                         toaster.error(response.data.message);
                     }
                 });

使用print服务打印div，使用变量（vm.barCodeImage）填充div的值。但是这里有一个值显示在打印中的所有时间。尝试在每次之后添加超时间隔，但没有运气。

//打印服务代码

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

 }
})();

这个预期的结果应该是三个不同的打印（假设循环大小为3，它应该是7858,7859,7860），但在这里它显示所有相同。

printThisElement id是一个HTML。

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

Answer 1

好吧，我认为你的绑定是错误的。 printThisElement指控制器中的单个数据。因此，如果您有多个条目，则它必须是一个数组。

我建议您使用指令而不是服务来打印DOM中的元素。

我创建了一个小插图来说明它：https://plnkr.co/edit/QvmqV88wZCYbsehMWh3W?p=preview

此plunker显示如何从调用异步服务的数组中显示所有条目。

该指令非常简单：

.directive('print', function() {
   return {
     restrict: 'E',
     scope: {
        data: '='
     },
     template: '<div id="printThisElement" class="onlyprint" ><table><tr> <td>{{ data.instCode }}</td></tr><tr><td>... Other values in data ...</td></tr></table></div>',
 }
})

该指令的模板是您的printThisElement id。通过这种方式，您可以按指令显示多个结果。

希望这会对你有所帮助

编辑：问题的解决方案是此堆栈上的报告Inconsistent Data on multiple page printing on a printer

多个打印的角度打印服务超时问题

1 个答案: