Я хочу напечатать несколько штрихов для штрих-кода, каждый из которых будет иметь другой штрих-код.
Используя службу печати для печати содержимого 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
что может быть причиной этого?
Никогда не изменяйте DOM изнутри службы, это просто полностью против всей работы Angular. Вместо этого вы должны создать модель данных (и это вполне нормально создать в службе) и использовать угловые шаблоны для рендеринга этой модели на странице.
Причина, по которой ваш код не работает, заключается в том, что вы пытаетесь повторно использовать vm.barCodeImage
для разных изображений на странице. Угловые отслеживают изменения и будут перерисовывать существующие части страницы. Вот почему вы повторяете один и тот же штрих-код: разные копии используют одну и ту же модель, чтобы они были одинаковыми.
Простое решение - создать массив vm.barCodeImages
а затем просто визуализировать их в цикле ng-repeat
. Лучшим способом могло бы быть создание директивы myBarcode
которая использует UserService.printBarCodes
для создания одного штрих-кода в изолированной области, а затем ваш шаблон будет выглядеть короче и более аккуратным.