在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
前段时间写了两篇不用第三方控件,用纯javascript解决asp.net页面打印的问题。在使用测试中发现了一些问题:比如分页后的效果不大友好,没有设置每个页面的也边框;页眉页脚处理不是很好;页边距设置后打印出来不对等。经过这几天的继续研究,终于把这些问题全部解决了,可以说的完美的实现了页面打印、数据分页、纸张大小设定、页边距设定、页眉页脚设置(哈哈自己YY一下)。 这里分享一下主要解决的几个问题,希望对大家有所帮助 Question: 1. 添加页面的也边框,为每个分页后的页面最外层添加一个div框,这样预览效果更好; 2. 重新设置每个分页的div嵌套组成;设置页眉、页脚、页面等; 3. 设置打印的时候纸张Size,页边距等信息; Solution: 1. 为页面添加一个边框div,涉及到两个问题,一个是根据分页后的页数,动态生成每个页面的边框;第二个是在打印的时候这个边框不能打印出来应该去掉;那么如何处理呢?——我的办法是在页面中设定一<div id="pageBorderDiv" class="noprint" style="position: absolute;"> </div>然后每次分页之后动态的添加该div的孩子也就是也边框div层。这样既解决了显示边框的问题,打印的时候这些div也不会被打印了。 2. 每个页面div组成,如右下图所示。最外层div的size就是打印纸张的size;里面第二个div的高度还是为纸张的高度,宽度为纸张size-左右页边距的大小;然后高度又被分成3个部分,分别是被页眉、页脚、页面所瓜分。
3. 设置打印的时候纸张Size,页边距等信息,这个是最重要的地方。因为前面我所做的一切都只是个显示问题,而需要把这些按照所见在打印出来,更关键。之前我的打印在设定页边距后之所以出现问题,就出在这里,没有设置到也面的大小。这里我们可以使用css的@page来设定打印page的属性。 @page 这里size 就打印纸张的大小,margin就是页边距,因为我们的页边距都设置到了每个页面的div里面,所以这里面的margin值我们设置为0px就行了。 关于demo 现在还没有整理出来,等空了整理出来分享。 最近看到大家在关注篇文章希望demo,我抽整理了一下,发在这里,供大家参考。demo链接如下: |
请发表评论