gpt4 book ai didi

html - 将 HTML 导出为 PDF 始终在新页面的底部对齐

转载 作者:技术小花猫 更新时间:2023-10-29 12:25:37 26 4
gpt4 key购买 nike

我在将 html 导出为 PDF 时遇到问题。我希望底部的部分始终与新页面的底部对齐。

现在这个部分(当涉及到分页符时)在新页面的顶部对齐:

enter image description here

该部分的代码:

<div style='page-break-inside:avoid;vertical-align:bottom;'>
<font face="Verdana" >
<br>
<table cellspacing="0" cellpadding="0" style="width:900px;">
<tbody>
<tr>
<td style="width:500px">
BLAGO DOSTAVIL:&nbsp;______________________<br/><br/>
Podpis<br/><br/>
Datum:&nbsp;______________________
</td>
<td>
BLAGO PREVZEL:&nbsp;______________________<br/><br/>
Podpis<br/><br/>
Datum:&nbsp;______________________
</td>

</tr>
</tbody>
</table>
</font>
<font face="Verdana" size="1" >
<br /><br />
<table cellspacing="0" cellpadding="0" style="width:900px;">
<tbody>
<tr>
<td style="text-align:center">
<i>
testting d.o.o., testing, ID za DDV: testing, matična št.: testing
<br>
tel: +386 XXXXXXXXXX, fax: +386 1 XXXXXXXXX, e-mail: info@XXXX.si, web: www.xxxxxxx.si
<br>
Družba je vpisana pri okrožnem sodišču v Ljubljani, št. vpisa v registru: 1/XXXXX/00, ustanovni kapital: XX.000 EUR
<br>
Račun odprt pri NLB d.d., Iban: SIXXXXXXX, SWIFT-BIC: LJBASI2X
</i>
</td>
</tr>

</tbody>
</table>
</font>
</div>

这是我对整个页面的代码(包括底部在分页符处跳转到新页面的部分):

<style>#tblArticles{font-size: 12px !important; font-family: verdana, sans-serif; border-collapse: collapse; width: 100%;}
#tblArticles td{border: 1px solid black;text-align: center;padding: 8px;}
#tblArticles th {border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}
</style>
<style>#tblLeft{position:absolute;left:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:40%;}
#tblLeft td{font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;}
#tblLeft th {font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}</style>
<style>#tblRight{position:absolute;right:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:20%;}
#tblRight td{font-size: 10px !important; text-align: center;padding: 8px;}</style>
<table id='tblArticles'>
<thead>
<th>Vrsta blaga/storitve</th>
<th>Interna številka</th>
<th>Prodana koda</th>
<th>Količina</th>
<th>EnM</th>
<th>Cena brez DDV</th>
<th>Vrednost brez DDV</th>
<th>DDV</th>
<th>Znesek DDV</th>
<th>Vrednost z DDV</th>
</thead>
<tfoot>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
</tfoot>
<tbody style='page-break-inside:avoid;'>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td rowspan='1' style='page-break-inside:avoid;'><label>Večerja na zajli</label></td>
<td style=''>
<img src=http://localhost:53358/resources/Images/EAN128/VzlSSlNYVlo=.jpg><br/>
<label>VzlSSlNYVlo=</label><br/>
</td>
<td style=''><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>1,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>91,14 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>91,14 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>9,50 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>8,66 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>99,80 €</td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td rowspan='7' style='page-break-inside:avoid;'><label>Veliki kuharski mojster</label></td>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/TDZKVzRDVks=.jpg><br/>
<label>TDZKVzRDVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>7,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>65,69 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>459,83 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>22,00 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>101,16 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>560,99 €</td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/Q0U2RURCVks=.jpg><br/>
<label>Q0U2RURCVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/RFg0TVZXVks=.jpg><br/>
<label>RFg0TVZXVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/OFdGRTJLVks=.jpg><br/>
<label>OFdGRTJLVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/QlROR0NMVks=.jpg><br/>
<label>QlROR0NMVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/SjNYWkJOVks=.jpg><br/>
<label>SjNYWkJOVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style=''>
<img src=http://localhost:53358/resources/Images/EAN128/M0RFWURXVks=.jpg><br/>
<label>M0RFWURXVks=</label><br/>
</td>
<td style=''><input type='checkbox'><br/><label></label><br/></td>
</tr>
</tbody>
</table><br/>
<div style='page-break-inside:avoid;margin-bottom: 30px;'>
<label style='position:relative;left:0;font-size:12px;'>Specifikacija obračunanega davka, dokumenta št.:</label><br/>
<div id='divBottom' style='position:relative;width:100%;min-height:160px;'>
<table id='tblLeft'>
<th>Stopnja</th><th>Osnova za DDV</th><th>Znesek DDV</th><th>Vrednost z DDV</th>
<tr>
<td>9,5 %</td><td>91,14 €</td><td>8,66 €</td><td>99,80 €</td>
</tr><tr>
<td>22 %</td><td>459,83 €</td><td>101,16 €</td><td>560,99 €</td>
</tr>
</table>
<table id='tblRight'>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>Skupaj brez DDV:</b></td><td style='text-align:right;'>550,97 €</td>
</tr>
<tr>
<td style='text-align:left;'><b>Osnova za DDV</b></td><td style='text-align:right;'>550,97 €</td>
</tr>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>DDV:</b></td><td style='text-align:right;'>109,82 €</td>
</tr>
</table>
<label style='position:absolute;right:80px;bottom:20px;'><b>SKUPAJ:</b></label>
<label style='position:absolute;right:0;bottom:20px;'><b>660,79 €</b></label>
</div></div><br/><br/><br/>

<div style='page-break-inside:avoid;vertical-align:bottom;'>
<font face="Verdana" >
<br>
<table cellspacing="0" cellpadding="0" style="width:900px;">
<tbody>
<tr>
<td style="width:500px">
BLAGO DOSTAVIL:&nbsp;______________________<br/><br/>
Podpis<br/><br/>
Datum:&nbsp;______________________
</td>
<td>
BLAGO PREVZEL:&nbsp;______________________<br/><br/>
Podpis<br/><br/>
Datum:&nbsp;______________________
</td>

</tr>
</tbody>
</table>
</font>
<font face="Verdana" size="1" >
<br /><br />
<table cellspacing="0" cellpadding="0" style="width:900px;">
<tbody>
<tr>
<td style="text-align:center">
<i>
testting d.o.o., testing, ID za DDV: testing, matična št.: testing
<br>
tel: +386 XXXXXXXXXX, fax: +386 1 XXXXXXXXX, e-mail: info@XXXX.si, web: www.xxxxxxx.si
<br>
Družba je vpisana pri okrožnem sodišču v Ljubljani, št. vpisa v registru: 1/XXXXX/00, ustanovni kapital: XX.000 EUR
<br>
Račun odprt pri NLB d.d., Iban: SIXXXXXXX, SWIFT-BIC: LJBASI2X
</i>
</td>
</tr>

</tbody>
</table>
</font>
</div>

最佳答案

我刚刚将页面底部包含联系信息的表格作为新表格移动:

<tr><td colspan="2"></td></tr>

在表格中,我们将在打印时将其粘贴到页面底部。

然后你只需要为@media print添加一个样式规则,像这样:

@media print{
table#stickToFooter{
position: fixed;
bottom: 0;
}
}

说,我没有在其他部分操纵你的代码,只是作为一个best-practice规则,请尽量避免在内联标签中包围非内联级元素。我的意思是如果您使用这些样式元素设置表格的字体系列和大小会好得多:

table{
font-family: Verdana, sans-serif;
font-size: 10px
}

而不是将其封装在 <font face="Verdana" size="1">...</font> 中标签。提前致谢。

<style>#tblArticles{font-size: 12px !important; font-family: verdana, sans-serif; border-collapse: collapse; width: 100%;}
#tblArticles td{border: 1px solid black;text-align: center;padding: 8px;}
#tblArticles th {border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}
</style>
<style>#tblLeft{position:absolute;left:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:40%;}
#tblLeft td{font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;}
#tblLeft th {font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}</style>
<style>#tblRight{position:absolute;right:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:20%;}
#tblRight td{font-size: 10px !important; text-align: center;padding: 8px;}</style>
<style>
@media print{
table#stickToFooter{
position: fixed;
bottom: 0;
}
}
</style>
<table id='tblArticles'>
<thead>
<th>Vrsta blaga/storitve</th>
<th>Interna številka</th>
<th>Prodana koda</th>
<th>Količina</th>
<th>EnM</th>
<th>Cena brez DDV</th>
<th>Vrednost brez DDV</th>
<th>DDV</th>
<th>Znesek DDV</th>
<th>Vrednost z DDV</th>
</thead>
<tfoot>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
</tfoot>
<tbody style='page-break-inside:avoid;'>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td rowspan='1' style='page-break-inside:avoid;'><label>Večerja na zajli</label></td>
<td style=''>
<img src=http://localhost:53358/resources/Images/EAN128/VzlSSlNYVlo=.jpg><br/>
<label>VzlSSlNYVlo=</label><br/>
</td>
<td style=''><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>1,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>91,14 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>91,14 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>9,50 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>8,66 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>99,80 €</td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td rowspan='7' style='page-break-inside:avoid;'><label>Veliki kuharski mojster</label></td>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/TDZKVzRDVks=.jpg><br/>
<label>TDZKVzRDVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>7,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>65,69 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>459,83 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>22,00 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>101,16 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>560,99 €</td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/Q0U2RURCVks=.jpg><br/>
<label>Q0U2RURCVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/RFg0TVZXVks=.jpg><br/>
<label>RFg0TVZXVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/OFdGRTJLVks=.jpg><br/>
<label>OFdGRTJLVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/QlROR0NMVks=.jpg><br/>
<label>QlROR0NMVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/SjNYWkJOVks=.jpg><br/>
<label>SjNYWkJOVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style=''>
<img src=http://localhost:53358/resources/Images/EAN128/M0RFWURXVks=.jpg><br/>
<label>M0RFWURXVks=</label><br/>
</td>
<td style=''><input type='checkbox'><br/><label></label><br/></td>
</tr>
</tbody>
</table><br/>
<div style='page-break-inside:avoid;margin-bottom: 30px;'>
<label style='position:relative;left:0;font-size:12px;'>Specifikacija obračunanega davka, dokumenta št.:</label><br/>
<div id='divBottom' style='position:relative;width:100%;min-height:160px;'>
<table id='tblLeft'>
<th>Stopnja</th><th>Osnova za DDV</th><th>Znesek DDV</th><th>Vrednost z DDV</th>
<tr>
<td>9,5 %</td><td>91,14 €</td><td>8,66 €</td><td>99,80 €</td>
</tr><tr>
<td>22 %</td><td>459,83 €</td><td>101,16 €</td><td>560,99 €</td>
</tr>
</table>
<table id='tblRight'>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>Skupaj brez DDV:</b></td><td style='text-align:right;'>550,97 €</td>
</tr>
<tr>
<td style='text-align:left;'><b>Osnova za DDV</b></td><td style='text-align:right;'>550,97 €</td>
</tr>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>DDV:</b></td><td style='text-align:right;'>109,82 €</td>
</tr>
</table>
<label style='position:absolute;right:80px;bottom:20px;'><b>SKUPAJ:</b></label>
<label style='position:absolute;right:0;bottom:20px;'><b>660,79 €</b></label>
</div></div><br/><br/><br/>

<div style='page-break-inside:avoid;vertical-align:bottom;'>
<font face="Verdana" >
<br>
<table cellspacing="0" cellpadding="0" style="width:900px;">
<tbody>
<tr>
<td style="width:500px">
BLAGO DOSTAVIL:&nbsp;______________________<br/><br/>
Podpis<br/><br/>
Datum:&nbsp;______________________
</td>
<td>
BLAGO PREVZEL:&nbsp;______________________<br/><br/>
Podpis<br/><br/>
Datum:&nbsp;______________________
</td>

</tr>
<tr>
<td colspan="2" style="text-align:center; font-size: 10px;">
<i>
testting d.o.o., testing, ID za DDV: testing, matična št.: testing
<br>
tel: +386 XXXXXXXXXX, fax: +386 1 XXXXXXXXX, e-mail: info@XXXX.si, web: www.xxxxxxx.si
<br>
Družba je vpisana pri okrožnem sodišču v Ljubljani, št. vpisa v registru: 1/XXXXX/00, ustanovni kapital: XX.000 EUR
<br>
Račun odprt pri NLB d.d., Iban: SIXXXXXXX, SWIFT-BIC: LJBASI2X
</i>
</td>
</tr>
</tbody>
</table>
</font>
</div>

关于html - 将 HTML 导出为 PDF 始终在新页面的底部对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42479862/

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