脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

css之分页打印的示例代码

  发布时间：2018-01-22 14:41:36   作者：张毓飞   我要评论
这篇文章主要介绍了css之分页打印的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

很久没写文章了，最近做了一个员工入职的项目，该系统有一个批量打印个人信息的功能需求。因为之前也没接触过打印这方面的功能，就上网查了下，发现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属性如下：

分页实例（此处借用网上例子）：

<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实现电梯导航的项目实践

    CSS梯形导航图是一种使用 CSS 布局实现的导航设计,可以根据需要灵活调整导航菜单的上下位置和大小，本文主要介绍了css实现电梯导航，具有一定的参考价值，感兴趣的可以了解
    2023-05-06

  • CSS中calc(100%-100px)不加空格不生效

    本文主要介绍了CSS中calc(100%-100px)不加空格不生效，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学
    2023-05-05

  • css弧边选项卡的项目实践

    本文主要介绍了css弧边选项卡的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05

  • CSS实现鼠标悬浮动画特效

    Css(层叠样式表)是种格式化网页的标准方式，用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术,使用css可以制作各种好看的动画特效,
    2023-05-04

  • CSS link与@import的区别和用法解析

    CSS的link和@import都是用于引入外部CSS文件的方法，但它们有一些区别和不同的用法，本文通过一个简单的代码演示，展示了link和@import的用法，感兴趣的朋友跟随小编一起看
    2023-05-04

  • 使用CSS实现百叶窗效果示例代码

    这篇文章主要介绍了使用CSS实现百叶窗效果示例代码,技术上只使用了css+html,还是非常容易学习的，做出来的百叶窗效果也是很丝滑，文中提供了详细的代码,需要的朋友可以参考
    2023-04-28

  • 使用CSS实现按钮边缘跑马灯动画

    这篇文章主要介绍了使用CSS实现按钮边缘跑马灯动画,技术上只使用了css+html,还是非常容易学习的，文中提供了详细的代码,需要的朋友可以参考下
    2023-04-28

  • css旋转导航的示例代码

    本文主要介绍了css旋转导航的示例代码，文中通过示例代码介绍的非常详细，该导航可用在一些网站首页导航栏中，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-27

  • css实现交融文字效果的项目实践

    这篇文章将介绍如何使用CSS实现交融文字效果，这是一种独特的标题设计，可以增加页面的视觉吸引力和用户体验。通过使用CSS的letter-spacing属性，我们可以创建出字母之间交
    2023-04-27

  • flex子元素内容超出盒子容器宽度问题解决

    在使用弹性布局的时候，必然会有碰到分配子元素空间问题，本文主要介绍了flex子元素内容超出盒子容器宽度问题解决，感兴趣的可以了解一下
    2023-04-24

最新评论

关注微信公众号

扫一扫