Функция печати Mutliplr возвращает несогласованные данные при изменении значения $ timeout

0

Я хочу напечатать несколько штрихов для штрих-кода, каждый из которых будет иметь другой штрих-код.

Используя службу печати для печати содержимого 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 для печати.

 <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

что может быть причиной этого?

Теги:
printing

1 ответ

0

Никогда не изменяйте DOM изнутри службы, это просто полностью против всей работы Angular. Вместо этого вы должны создать модель данных (и это вполне нормально создать в службе) и использовать угловые шаблоны для рендеринга этой модели на странице.

Причина, по которой ваш код не работает, заключается в том, что вы пытаетесь повторно использовать vm.barCodeImage для разных изображений на странице. Угловые отслеживают изменения и будут перерисовывать существующие части страницы. Вот почему вы повторяете один и тот же штрих-код: разные копии используют одну и ту же модель, чтобы они были одинаковыми.

Простое решение - создать массив vm.barCodeImages а затем просто визуализировать их в цикле ng-repeat. Лучшим способом могло бы быть создание директивы myBarcode которая использует UserService.printBarCodes для создания одного штрих-кода в изолированной области, а затем ваш шаблон будет выглядеть короче и более аккуратным.

  • 0
    UserService.printBarCodes создает более одного штрих-кода. Кроме того, если я повторяю цикл, нужно ли полностью изменить службу печати?
  • 0
    Необходимо отобразить на трех разных страницах три разных отпечатка.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню