您的位置: 首页  >  技术问答  >  将HTML导出为PDF总是在新页面的底部对齐

将HTML导出为PDF总是在新页面的底部对齐

分类: 技术问答 • 2022-03-22 11:48:06

将HTML导出为PDF总是在新页面的底部对齐

问题描述：

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

I am having a problem with export html to PDF. I would like section at the bottom to be always aligned at the bottom of a new page.

现在，此部分（涉及分页符）与新页面顶部：

Right now this section (when it comes to page break) is aligned at the top of a new page:

该代码部分：

<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>

这是我整个页面的代码（包括底部的部分，在分页符处跳入新页面）：

Here is my code for the whole page (including section at the bottom which jumps into new page at page break):

<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>

答

我刚刚将包含联系信息的表格移动为新页面：

I just moved the table holding contact info at the bottom of the page as a new:

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

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

to the table we are going to stick it to the bottom of the page while printing.

然后，您只需为 @media print 添加样式规则，就像这样：

Then you need to only add a style rule for @media print, like this:

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

说，我没有用其他方式操纵您的代码部分，但就像最佳实践规则一样，请尽量避免将内嵌代码中的非内嵌级别元素包含在内。我的意思是，如果您设置表格的字体系列&使用以下样式元素的大小：

Say, I didn't manipulate you code in other parts, but just as a best-practice rule, please try to avoid surrounding none-inline level elements in inline tags. I mean it'd be much better if you set table's font-family & size using these styling elements:

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

而不是将其包含在< font face = Verdana size = 1> ...< / font> 标签。

than enclosing it inside a <font face="Verdana" size="1">...</font> tag. Thanks in advance.

<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>

相关推荐