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

HTML 前端之家
前端之家收集整理的这篇文章主要介绍了将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>
原文链接：https://www.f2er.com/html/231368.html

猜你在找的HTML相关文章

elasticsearch扩展ik分词器词库
操作步骤 1、进入elasticsearch的plugin，进入ik。进入config。 2、在config下面建立以.di...
echarts中legend如何换行
lengend data数据中若存在&#39;&#39;，则表示换行，用&#39;&#39;切割。
Echart常用效果（一）
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { t...
freemarker中js里面取字符串，换行导致报错的解决办法
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var d...
Freemarker + xml 实现Java导出word
前言 最近做了一个调查问卷导出的功能，需求是将维护的题目，答案，导出成word，参考了几种...
【前端JSP思考】JSP中#{},${}和%{}的区别
JSP中#{},${}和%{}的区别： # #{}：对语句进行预编译，此语句解析的是占位符?，可以防止SQ...
【前端HTML】常用标签及属性
对于很多人来说，用HTML标签都是熟能生巧，而不清楚为什么是那样的标签，所以我在这列了一...
[前端]GOFLY项目-响应式登录页的设计和实现
登录界面如果要实现响应式 , 需要注意宽度的设置和media query的使用 宽度一般都是按百分比...
[前端] 设定为disabled的表单域值不能被提交
表单中的某个表单域被设定为disabled，则该表单域的值就不会被提交。 但是我们需要提交这个...
[前端] 代码中执行绑定元素的指定事件trigger方法
前面业务里有个搜索功能 , 入口比较深 , 现在想要把入口挪到有公共header的地方 , 在不想完...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作