打印 发票 表格实现

<div> <div> <div style="background: white;height: 576px;width: 911px;padding: 10px" #print> <div style="width: 794px; padding: 10px; text-align: center; margin: auto;"> <div style="float: right;border: 2px solid; border-radius: 100px;width: 40px; height: 40px; text-align:center"> <label style="padding: 5px; font-size: 29px;font-weight: bold;line-height: 40px"> 国</label> </div> <div style="text-align: center;font-size: 26px;font-weight: bold"> <div> <label>中&nbsp;华&nbsp;人&nbsp;民&nbsp;共&nbsp;和&nbsp;国</label> </div> <div class="top-title"> <label style="border-width: 0px 0px 5px 0px;border-color: #919191;border-style: solid;padding: 5px"> 税收缴款书(税务收现专用) </label> </div> </div> <div> <label style="float: right; margin-right: 64px;font-size: 12px">(171)皖国现</label> </div> </div> <div> <div style="font-weight: bold; font-size: 12px; width: 794px; margin: auto; padding-top: 30px"> <label>登记注册类型：</label><label style="margin-right: 135px">内资个人</label> <label>增发日期：</label><label style="margin-right: 135px">2019年04月15日</label> <label>税务机关：</label><label>机关</label> </div> <table style="border: 1px solid #666666;width: 794px;height: 416px;border-collapse:collapse;margin: auto"> <tr height="50px"> <td colspan="8" > <table style="width: 100%;height: 50px;border: 0px;border-collapse:collapse"> <tr> <td class="td-text" style="width:116px;border-width: 0px 1px 0px 0px">纳税人识别号</td> <td class="td-blue" colspan="2" style="border-width: 0px 0px 0px 0px">{{datas.applyCard}}</td> <td class="td-text" style="width:116px;border-width: 0px 1px 0px 1px">纳税人名称</td> <td class="td-blue" colspan="2" style="border-width: 0px 0px 0px 0px">{{datas.applyPerson}}</td> </tr> <tr> <td class="td-text" style="width:116px;border-width: 1px 1px 0px 0px">地址</td> <td colspan="5" style="border-width: 1px 0px 0px 0px"></td> </tr> </table> </td> </tr> <tr > <td colspan="8" style="height: 264px;"> <table style="width: 100%;height: 262px;border: 0px;border-collapse:collapse;display: block"> <!--<thead >--> <tr style="height: 25px"> <td class="td-text" style="width: 70px;border-width: 0px 1px 1px 0px">税种</td> <td class="td-text" style="width: 176px;border-width: 0px 1px 1px 0px">品目名称</td> <td class="td-text" style="width:62px;border-width: 0px 1px 1px 0px">课税数量</td> <td class="td-text" style="width:88px;border-width: 0px 1px 1px 0px">计税金额或销售收入</td> <td class="td-text" style="width: 70px;border-width: 0px 1px 1px 0px">税率或单位税额</td> <td class="td-text" style="width: 176px;border-width: 0px 1px 1px 0px">税款所属时期</td> <td class="td-text" style="width: 62px;border-width: 0px 1px 1px 0px">已缴或扣除额</td> <td class="td-text" style="width: 88px;border-width: 0px 0px 1px 0px">实缴金额</td> </tr> <!--</thead>--> <tbody style="height: 239px"> <tr > <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> </tr> <tr> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> </tr> <tr> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> </tr> <tr style="height: 25px"> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> <td class="no-border-td">111</td> </tr> <tr *ngFor="let item of datas.list" style="height: 25px"> <td class="no-border-td">{{item.zsxmDm}}</td> <td class="no-border-td">{{item.zspmDm}}</td> <td class="no-border-td">{{item.num}}</td> <td class="no-border-td">{{item.jsyj}}</td> <td class="no-border-td">{{item.sfl}}</td> <td class="no-border-td">{{item.skssqz}}至{{item.skssqz}}</td> <td class="no-border-td">{{item.yjse}}</td> <td class="no-border-td">{{item.ybse}}</td> </tr> </tbody> </table> </td> </tr> <tr style="height: 25px"> <td class="td-text" style="width: 92px;">合计金额</td> <td colspan="6" class="td-blue">(大写){{datas.totalAmountChinese}}</td> <td class="td-blue" style="width: 87px">￥{{datas.totalAmount}}</td> </tr> <tr style="height: 77px;"> <td colspan="8"> <table style="width: 100%;height: 100%;border: 0px;border-collapse:collapse"> <tr> <td class="td-text" style="width:130px;border-width: 0px 1px 0px 0px">税务机关 <br/>(盖章)</td> <td class="td-text" style="width:130px;border-width: 0px 1px 0px 0px">税务机关 <br/>(盖章)</td> <td class="td-text" style="width:130px;border-width: 0px 1px 0px 0px">填票人 <br/> <label class="td-blue">{{datas.name}}</label> </td> <td class="td-text" colspan="3" style="text-align:left;border-width: 0px;vertical-align: top;padding: 10px"> <label style="float: left;align-items: flex-start"> 备注 </label> <br/> <label class="td-blue">(盖章)</label></td> </tr> </table> </td> </tr> </table> </div> </div> </div> <essence-ng2-print #print2 [mode]="'iframe'" [printHTML]="print" [printStyle]="printStyle" [printCSS]="printCSS" [showBtn]="false" (printComplete)="printComplete()"> </essence-ng2-print> <button class="btn" style="margin: 20px" (click)="customerPrint()"> 打印</button> </div>