gpt4 book ai didi

html - 打印预览未显示正确的布局

转载 作者:太空宇宙 更新时间:2023-11-04 07:06:35 25 4
gpt4 key购买 nike

我需要打印我的 html,所以我按照我想要的打印方式进行布局。但是,当我单击 打印按钮 并转到打印预览时,布局全乱了。请在下面查看我的代码:

在 html 中

<div id="print-section" *ngIf="propertyLedger">
<h2>SOSA | PMIS</h2>
<hr>
<table class="table borderless">
<tr>
<th class="col-md-2">Transaction Date</th>
<td>{{dateToday | date}}</td>
</tr>
<tr>
<th class="col-md-2">Collecting Agent</th>
<td>{{propertyLedger.CollectinAgentName}}</td>
</tr>
<tr>
<th class="col-md-2">Unit Name</th>
<td>{{propertyLedger.UnitName}}</td>
</tr>
<tr>
<th class="col-md-2">Payment Type</th>
<td>{{propertyLedger.PaymentType}}</td>
</tr>
<tr>
<th class="col-md-2">O.R. Number</th>
<td>{{propertyLedger.ORNumber}}</td>
</tr>
<tr>
<th class="col-md-2">Remarks</th>
<td>{{propertyLedger.Remarks}}</td>
</tr>
</table>
<hr>
<h3>Details</h3>
<hr>
</div>
<button

class="btn btn-primary" (click)="print()">Print</button>

在ts文件中

print() {
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
<style>
//........Customized style.......
</style>
</head>
<body onload="window.print();window.close()">${printContents}</body>
</html>`
);
popupWin.document.close();
}

在我的布局中 enter image description here只要我点击打印 =>

在我的打印预览中 enter image description here
表格左侧的文本似乎位于中间。你能帮我解决这个问题吗?如果您有办法在没有任何表格的情况下获得我想要的布局,那将是最好的!非常感谢。

最佳答案

刚读完。 HTML 中的默认值具有这些属性。

th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center
}

你必须把它改成这样:

th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: left;
}

此外,如果您不使用 HTML5,您也可以将标签制作成这样:

<th align="left" class="col-md-2">Unit Name</th>

关于html - 打印预览未显示正确的布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51570158/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com