在最近所做的一个项目中,需要通过网页来打印不少的表单,但是又不想每个打印页签各占用一个页面,这样就需要生存很多不同的冗余页面,为了减少冗余,所有的表单通过jquery的页签tab来实现的。

一 :基本打印的实现:

      1:tab页签在切换时的change事件中,记住每个页签的index,

      2:在点击打印按钮时,根据所记住的index,由页签的id("tab名+index"组成),获取当前tab页签下所有的html;

      3: 将获取到的需要打印页签的html赋值给document.body.innerHTML,(因为网页打印,是打印当前窗口的所有的html,所以此时需要改变他的内容,为了能够回到原来的页面效果,需要记住原始页面的html,待打印完后,再把原始内容赋值回去。)

      4:调用网页打印函数window.print();

关键代码段:

二:表格在跨页时自动换页的实现

  在打印时,如果是一个整体的表格或文档格式的内容,就可以直接打印,不用管页面里的表格或文档是否断裂。但如果在打印的页面,有很多组的表格,而且每组表格的记录条数不是固定的,且要求每个表格在不超出A4纸大小的范围内都在一张纸上,不能出现一个小于A4纸的表格分两页打印,这时候就需要实现在表格跨页面时自动分页打印。

实现思路:

1:html结构 :在该tab页签里面的, 表格一般有表头的描述性文字,用div表示,div的高度固定,表格体一般是table,table的每行的高度需要固定,这样一组表格的高度就固定了,注意在该html结构的css样式中不能出现padding和margin之类的样式,否则会影响哦。。。

2:几个固定的高度:

A4纸的高度:实际为A4纸内div的高度(因为会将在一张纸内的表格包在一个div里,不然尽管设置了高度,貌似无效),经过几轮打印测试下来,高度基本定位为955px;

一张A4纸内内容的高度:若是将内容高度定义为A4纸的高度,貌似还是有点问题的,测试下来最后将 内容高度〈A4纸的高度,定义为:890px;

当累加的每组表格的高度超过所定义内容的高度时,把前面的所有组的html放在一个div内,且设置div的高度为A4纸的高度,然后将当前组的html作为第二个div的内容开始累加,最后将所有组的html累加打印即可;

代码:

网页打印与网页页面设置有关,我的都是默认设置:

                              

原文:http://www.cnblogs.com/Joans/archive/2013/02/05/2892771.html

作者:Joan
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

网页打印A4纸-----表格在跨页时自动换页打印的实现 (转)的更多相关文章

  1. longtable 跨越多个页面时,如何在跨页时自动断行并加上横线及去掉页眉

    参考: http://users.sdsc.edu/~ssmallen/latex/longtable.html 一般的,在首行后面加上 \endfirsthead\hline\endhead\hli ...

  2. Office 2019 Word表格无法跨页重复标题行

    Office 2019 Word表格无法跨页重复标题行 今天使用Word设置表格枫叶重复标题行,死活无法实现 右键属性设置还是直接点击重复标题行设置,表格整个跳转到下一页去了 然后百度了解决方案是在[ ...

  3. A4纸表格打印

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 使用Excel制作万年历(日历可A4纸打印)

    先来看看A4纸打印效果,其他功能后续继续完善中. 年份数据字典(农历节日) 农历节日表 年度 春节 元宵节 龙抬头 端午节 六月六 七月七 七月十五 仲秋节 除夕 2010年02月14日 2010年0 ...

  5. C#/VB.NET 设置PDF跨页表格重复显示表头行

    在创建表格时,如果表格内容出现跨页显示的时候,默认情况下该表格的表头不会在下一页显示,在阅读体验上不是很好.下面分享一个方法如何在表格跨页时显示表格的表头内容,在C#中只需要简单使用方法grid.Re ...

  6. Java 设置PDF跨页表格重复显示表头行

    在创建表格时,如果表格内容出现跨页显示的时候,默认情况下该表格的表头不会在下一页显示,在阅读体验上不是很好.下面分享一个方法如何在表格跨页是显示表格的表头内容,这里只需要简单使用方法 grid.set ...

  7. A4纸网页打印——宽高设置

    一.在公制长度单位与屏幕分辨率进行换算时,必须用到一个DPI(Dot Per Inch)指标. 经过我仔细的测试,发现了网页打印中,默认采用的是96dpi,并非传闻的72dpi . A4纸张的尺寸是2 ...

  8. width,height为多少px时,A4纸打印时刚好一页?

    计算方式一般的分辨率为XX像素/英寸,其中一英寸为25.4毫米.所以一毫米的像素数就为XX/25.4.现在的工作就是求XX的值了,把XX的值求出来以后,直接用XX/25.4 * 210就得到A4纸的像 ...

  9. A4纸网页打印 html网页页面的宽度设置成多少

    A4纸竖向打印,html网页页面的宽度设置成多少?这个问题是我们大家所疑惑的,于是网上搜集整理下,希望可以帮助你们 最近开发项目时遇到了网页打印的问题,这是问题之二,打印宽度设置 在公制长度单位与屏幕 ...

随机推荐

  1. NetBeans常用快捷键

    Ctrl+Space:代码自动完成,在Windows下通常与输入法切换有冲突,我改成了ALT+2: Ctrl+/:注释&取消注释: Alt+Shift+F:编辑器自动格式,由于三个组合键不好按 ...

  2. App主界面Tab实现方法

    ViewPager + FragmentPagerAdapter 这里模仿下微信APP界面的实现 国际惯例,先看下效果图:   activity_main.xml 布局文件: <?xml ver ...

  3. Ajax如何使用Session

    在Ajax中有时会使用到Session,在aspx.cs文件这样获取: string name = Session["name"]; 但是在Ajax中就不能这样获取Session, ...

  4. error TRK0002

    运行程序出现error TRK0002的原因是因为3ds max中打开了程序生成的模型,同时使用导致memory conflict,然后随之出现一些乱七八糟的问题. 只要将3ds max重置即可,即不 ...

  5. Eclipse主题更改

    1. 直接安装color theme eclipse:Help->Install New Software->Work with:Update Site -http://eclipse-c ...

  6. sql server 时间小汇

    SQL server DATE函数 (1)getdate   返回当前系统的日期和时间,精确到3毫秒 要求:获得系统的当前时间 语句:SELECT getdate() 执行结果: 注:getutcda ...

  7. zTree控件的使用

    最常用的使用方式是json格式 .net递归实现对象生成json格式字符串 代码: using System; using System.Collections.Generic; using Syst ...

  8. Gradle使用指南

    Gradle Plugin User Guide - Android Studio Project Sitehttp://tools.android.com/tech-docs/new-build-s ...

  9. hdu 2203:亲和串(水题,串的练习)

    亲和串 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  10. 攻城狮在路上(肆)How tomcat works(二) 一个简单的servlet容器

    该节在上一节的基础上增加了所谓对静态资源和动态资源访问的不同控制流程.示例里面采用的是对路径“/servlet/”进行了特殊处理. 一. 主要还是从HttpServer1中的main方法开始,先解析出 ...