南强小屋 Design By 杰米

很久没写文章了,最近做了一个员工入职的项目,该系统有一个批量打印个人信息的功能需求。因为之前也没接触过打印这方面的功能,就上网查了下,发现jquery有个打印功能的 API(PrintArea) ,关于这个api大家有兴趣的可以自行查看相关知识,在此我就不详细介绍了。当时我就采取了使用这个api去实现打印功能,当我用了这个api去实现实现功能时,发现确实可以调用浏览器的打印功能,不过打印的内容却是空白的,没有任何信息。然后就上网查了下,去了jquery官网查看了这个api,大部分都说是之前是支持打印的,现在需要在源码上加一句代码,当时搞了好久没搞明白就放弃了,不过我觉得应该是可行的,只是我功夫没到家吧,感兴趣的小伙伴倒是可以去尝试一下,应该会有很大的收获的。这个方案走不通了,就只能继续探索其他的方案了。

正在这个比较着急的时刻,发现了 window.print() 方法,原来直接就可以利用window的方法就可以实现打印功能了。正在我欣喜若狂的时候,一片乌云已悄悄来到了我的头上,瞬间人生灰暗了。虽说可以实现打印功能,但是网页批量打印的时候内容就会紧排到一起。哎,本以为可以完美解决这个问题的时候,谁曾想人生总是这么不尽人意。没办法,只能继续研究怎么实现分页打印功能了。当时首先想到的是在每一个要分页的最后容器加到一定的高度,让其充满这个A4纸高度,那么接下来的内容就会自动到下一页了。想像很美好,现实却很残忍,不尽人意。后来问了同事,说可以试一下css print属性实现强制分页,当时就查看了css print属性,看到文档说明的时候已经看到了希望的曙光,在我按照文档说明使用的print属性强制分页的时候结果却未能如愿以偿。当时已经很郁闷了,怎么也想不通为什么就是不行,可是还是不想放弃,既然官方文档说了可以实现,网上也是一大片能够实现的讲解,为什么我就没能实现呢。不甘心,直到最后发现了未能实现的问题所在,我当时的情况是这样的,外层有两个div容器,要打印的内容是我拼接的html,然后append外层容器中的,打印的时候css print属性就不起任何作用了。所以以后想要 使用css print属性实现强制分页功能的时候一定要记得打印的内容外层只有一个容器 。

css print属性如下:

css之分页打印的示例代码

分页实例(此处借用网上例子):

<div><input type="button" value="打印" onclick="Print()" /></div>  
<div id="page1">  
        <table width="100%"  border="0" cellpadding="0" cellspacing="0"  style="page-break-after:always" >  
        <tr><td>第一页打印内容</td></tr>  
        </table>  
</div>  
<div id="page2">  
        <table width="100%"  border="0" cellpadding="0" cellspacing="0" id="content" >  
        <tr><td>第二页打印内容</td></tr>  
        </table>  
</div>  
</body>  
</html>  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
css,分页打印

南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米

评论“css之分页打印的示例代码”

暂无css之分页打印的示例代码的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?