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

我出口html到PDF有问题.我希望底部的部分始终对齐在一个新页面的底部.

现在这个部分(当谈到分页符)在新页面的顶部对齐：

该部分的代码：

<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.,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;
  }
}

说,我没有在其他部分操纵你的代码,但作为一个最佳实践规则,请尽量避免在内联标签中包含非内联级元素.我的意思是,如果你设置表的font-family&使用这些样式元素的大小：

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: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,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.,matična št.: testing
                        <br>
                        tel: +386 XXXXXXXXXX,web: www.xxxxxxx.si
                        <br>
                        Družba je vpisana pri okrožnem sodišču v Ljubljani,ustanovni kapital: XX.000 EUR
                        <br>
                        Račun odprt pri NLB d.d.,SWIFT-BIC: LJBASI2X
                    </i>
                </td>
            </tr>
		  </tbody>
        </table>
</font>
</div>

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

解决方法

相关文章