最近项目中有个需求要求打印web页面数据，但是碰到打印预览显示数据时，多的数据就不翼而飞了（不分页），搞的很是焦灼~

最先是以为纸张的问题，胡乱折腾了一番，把A4约硬是改成了LARGE号的纸，多的数据就显示出来了，但是大多打印机用的都是A4，这样就有问题了~

继续想办法改！

来无意看到一个强制分页的CSS， "page-break-before"，大喜，认为胜利的曙光即将到来，

但在测试中发现兼容性不好~

再查资料，说Firefox不允许将独立的表分割，将要分页的数据放在<p>标签或者<div>标签。

最后发现如果body中有style="overflow-y:auto"  属性，部分浏览器的"page-break-before"就不起作用

至此，问题解决 ，在此记录一下。

By Hgq

关于WEB页面的强制分页打印问题的更多相关文章

  1. web页面实现指定区域打印功能

    web页面实现指定区域打印功能 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 详细如下: <style media=print type="t ...

  2. 应用CSS的page-break-after属性 实现WEB页面强制分页打印

    虽然dedecms.com向大家介绍了很多CSS属性的相关知识,但有些非常冷门的属性还是有所欠缺.在B/S程序中,对打印页面的控制,CSS相对比较弱,例如: 自动分页, 就基本没啥实际用途.我们通常需 ...

  3. 打印web页面指定区域的三种方法

    本文和大家分享一下web页面实现指定区域打印功能的三种方法,一起来看下吧. 第一种方法:使用CSS 定义一 个.noprint的class,将不打印的内容放入这个class内. 代码如下: <s ...

  4. (转）WEB页面导出为Word文档后分页&横向打印的方法

    <html>    <HEAD>        <title>WEB页面导出为Word文档后分页&横向打印的方法 </title>    < ...

  5. 基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作

    在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可 ...

  6. js打印WEB页面内容代码大全

    第一种方法:指定不打印区域 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 详细如下: <style media=print type="tex ...

  7. 基于视觉的Web页面分页算法VIPS的实现源代码下载

    基于视觉的Web页面分页算法VIPS的实现源代码下载 - tingya的专栏 - 博客频道 - CSDN.NET 基于视觉的Web页面分页算法VIPS的实现源代码下载 分类: 技术杂烩 2006-04 ...

  8. （转）基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作

    http://www.cnblogs.com/wuhuacong/p/5147368.html 在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这 ...

  9. web页面内容打印总结

    web页面打印有两种,一种是直接调用window.print()命令操作,一种是使用ActiveX插件(Object标签)操作,但是第二种只支持IE内核的浏览器. 示例1: <!DOCTYPE ...

随机推荐

  1. Codeforces 678F Lena and Queries

    题意: 你有一个点集,有三种操作: 往集合里插入一个点\((x, y)\) 从集合中删除第\(i\)次操作插入的点 对于给出的\(q\),询问点集中\(x \cdot q + y\)的最大值 分析: ...

  2. 使用tensorflow设计的网络模型看不到数据流向怎么办

    首先tensorflow的设计思想就是先把需要用的变量已张量的形式保存, 实际上并没有实质的数值填充. 然后设计网络架构,也仅仅是架构而已, 只能说明数据关系和层与层之间的关系. 真正的数据输入是在主 ...

  3. 【Edit Distance】cpp

    题目: Given two words word1 and word2, find the minimum number of steps required to convert word1 to w ...

  4. leetcode 【 Linked List Cycle II 】 python 实现

    公司和学校事情比较多,隔了好几天没刷题,今天继续刷起来. 题目: Given a linked list, return the node where the cycle begins. If the ...

  5. leetcode 【 Remove Element 】python 实现

    题目: Given an array and a value, remove all instances of that value in place and return the new lengt ...

  6. 【Python】locust框架接口性能测试（一）

    本人工作中主要对接口与web进行性能测试,而接口测试主要为http协议接口和webservice接口,本文主要对locust框架http接口测试先进行简单介绍. 1.测试需求 对某系统登录接口进行测试 ...

  7. python 学习分享-实战篇增删改查作业

    一大波函数来袭 作业要求: 1本次作业通过空格及逗号,将文件拆分成列表,在通过判断add.del.update.select等关键字,来判断用户执行的是哪种命令,根据不同的命令调用不同的函数去处理. ...

  8. [报错处理]Could not find a version that satisfies the requirement xml (from versions)

    安装xml库发生报错 pip3 install xml Collecting xml Could not find a version that satisfies the requirement x ...

  9. MFC编程入门之二十八（常用控件：列表视图控件List Control上）

    前面一节中,讲了图片控件Picture Control,本节为大家详解列表视图控件List Control的使用. 列表视图控件简介 列表视图控件List Control同样比较常见,它能够把任何字符 ...

  10. [NOI2010][bzoj2005] 能量采集 [欧拉函数+分块前缀和优化]

    题面: 传送门 思路: 稍微转化一下,可以发现,每个植物到原点连线上植物的数量,等于gcd(x,y)-1,其中xy是植物的横纵坐标 那么我们实际上就是要求2*sigma(gcd(x,y))-n*m了 ...