Question

我想要打印多个条形码单，每个条形码都有不同的条形码。

使用打印服务打印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 = '';
   }
  };

 }
})();

使用此打印服务，将打印单据。滑动数据将绑定。

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) {
                    /* $timeout(function() {
                        vm.barCodeImage = angular.copy(entry);
                      }, 0);*/
                        //vm.testName = item.testMast.testName.slice(0, 3);
                         vm.barCodeImage = angular.copy(entry);
                          $timeout(function() {
                             PrintService.printElement("printThisElement");
                         }, 1);
                        }); 
                     } else {
                         toaster.error(response.data.message);
                     }
                 });

这是最终打印的html，使用DOM元素id进行打印。

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

预期输出是三张带有不同条形码的单据： 7865 7866 7867

输出是三张具有相同条形码的单据 7865 7865 7865 有时候， 7866 7866 7866

在更改$ timeout（函数（）值输出时就像 7865 7865 7866

这可能是什么原因？

Answer 1

永远不要在服务中修改DOM，这完全违背了Angular的整个工作方式。你应该做的是创建一个数据模型（并且在服务中创建它是非常好的）并使用Angular的模板在页面中呈现该模型。

您的代码无法正常工作的原因是您正试图在页面上的不同图像上重复使用vm.barCodeImage。 Angular跟踪更改并重绘页面的现有部分。这就是为什么你重复使用相同的条形码：不同的副本每个都使用相同的模型，因此它们将是相同的。

一个简单的解决方案是创建一个vm.barCodeImages数组，然后在ng-repeat循环中渲染它们。更好的方法可能是创建一个myBarcode指令，该指令使用UserService.printBarCodes在隔离范围内创建一个条形码，然后您的模板看起来更短更整洁。

Mutliplr打印功能在更改$ timeout值

1 个答案: