微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：HTML作者：编程之家AI导航网
我出口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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据
准备:导入ElementUI 看官网教程 数据准备:JSON数据转换成树状 参考文章: JS实现 JSON扁平数据转换树状数据 后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name: &#39;&#39;, level: 0}, {id:2 , parentId: 0
vue阻止冒泡事件 阻止点击事件的执行 结合div和组件阻止点击事件
vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&quot;alerA1()&quot; &gt; &lt;div @click.stop=&quot;alerA2()&gt;&lt;div&gt; &lt;/div&gt; 这样就可以实现阻止点击 点击&#160;alerA2
自用代码css获取任意网址的/favicon.ico的方法教程
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用这种办法获取 如果有好的方法望评论告知 谢谢 &lt;img :ng-src=&quot;&#39;http://&#39;+list.url+&#39;/favicon.ico&#39;&quot; :src=&quot;&#39;ht
JS实现 JSON扁平数据转换树状数据
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name: &#39;&#39;, level: 0}, {id:2 , parentId: 0, name: &#39;&#39;, level: 0}, {id:3 , parentId: 2, name: &#39;&
JAVA下载文件防重复点击,防止多次下载请求，Cookie方式快速简单集成教程
JAVA下载文件防重复点击,防止多次下载请求，Cookie方式快速简单集成教程 JS文件在最下面: 引入 &lt;script src=&quot;${path}/js/jquery-2.0.3.min.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot
Mip是什么意思以及作用有哪些
Mip是什么意思以及作用有哪些
怎么测试Mip页面运行情况
怎么测试Mip页面运行情况
MIP安装的具体步骤有哪些
MIP安装的具体步骤有哪些
HTML添加超链接、锚点的方法及作用详解（附视频）
HTML添加超链接、锚点的方法及作用详解（附视频）
MIP的规则有哪些
MIP的规则有哪些
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native