During the execution of my javascript async function, I encountered a situation where my printing code was running before the div creation. I needed to ensure that my print code would run only after the completion of the for loop, but I struggled to find a solution.
This is the method I am using:
AllShipmentPrint() {
for (let index = 0; index < this.ShipmentList.SuppOrderLines.length; index++) {
const element = this.ShipmentList.SuppOrderLines[index];
for (let index2 = 0; index2 < (element.Amount / element.SetCount); index2++) {
this.BarcodePrintList.push({ Barcode: element.Barcode, FirmModelCode: element.FirmModelCode, ColorCode: element.Color.ColorCode, ColorName: element.Color.ColorName, SuppModelCode: element.SuppModelCode, SizeList: element.SizeList, SetCount: element.SetCount });
}
}
const printContent = document.getElementById("componentID");
const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
WindowPrt.document.write(printContent.innerHTML);
WindowPrt.document.close();
WindowPrt.focus();
WindowPrt.print();
}
This is the Print Code section:
const printContent = document.getElementById("componentID");
const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
WindowPrt.document.write(printContent.innerHTML);
WindowPrt.document.close();
WindowPrt.focus();
WindowPrt.print();
Below is the html code being used:
<div id="componentID">
<div *ngFor="let item of BarcodePrintList" style="margin-top: 10px;">
<div style="display: -webkit-inline-box;">
<div>
<span style="font-size: 9px;">Model : {{item.FirmModelCode}}_{{item.ColorCode}}
{{item.ColorName}}</span>
<div style="display: flex;">
<table style="font-size: 8px;text-align: center;">
<thead>
<tr>
<th *ngFor="let size of item.SizeList">{{size.PropValName}}</th>
</tr>
</thead>
<tbody>
<tr>
<td *ngFor="let size of item.SizeList">{{size.Amount}}</td>
</tr>
</tbody>
</table>
<span style="font-size: 12px;margin-top: 11px;margin-left: 11px;">SET : {{item.SetCount}}</span>
</div>
</div>
</div>
<div style="float: right;">
<img width="80px" height="40px" src="http://scm.vipstendo.com/assets/images/logo.png" alt="">
</div>
<div style="text-align: center;">
<ngx-barcode [bc-value]="item.Barcode" [bc-font-size]="10" [bc-width]="1.5" [bc-height]="30"
[bc-display-value]="true"></ngx-barcode>
</div>
<div>
<span style="font-size: 10px;">{{item.SuppModelCode}}</span>
</div>
</div>
</div>