Since javascript async was running, my printing code was running without div creation. I want to run my print code when the for loop is finished, but I couldn't find a solution.
this is my Method :
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 my Print Code :
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 my html code :
<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>
the simplest way is to wrap the rest in an empty setTimeout
so it's executed after a re-rendering:
setTimeout(() => {
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();
})
There are other, maybe better ways, but they require more insight into your app
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.