网页打印A4纸-----表格在跨页时自动换页打印的实现 (转)

在最近所做的一个项目中,需要通过网页来打印不少的表单,但是又不想每个打印页签各占用一个页面,这样就需要生存很多不同的冗余页面,为了减少冗余,所有的表单通过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

时间: 2024-08-06 11:38:44

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

网页返回上一页时自动刷新页面

js代码如下: <script> $(function () { window.onpageshow = function (event) { if (event.persisted) { window.location.reload(); } } }); </script> 原文地址:https://www.cnblogs.com/phperlinxinlan/p/10384510.html

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

A4纸竖向打印,html网页页面的宽度设置成多少?这个问题是我们大家所疑惑的,于是网上搜集整理下,希望可以帮助你们 最近开发项目时遇到了网页打印的问题,这是问题之二,打印宽度设置 在公制长度单位与屏幕分辨率进行换算时,必须用到一个DPI(Dot Per Inch)指标. 经过我仔细的测试,发现了网页打印中,默认采用的是96dpi,并非传闻的72dpi A4纸张的尺寸是210×297mm,按1英寸=25.41mm换算,即8.264×11.688英寸 所以,A4纸96dpi下的分辨率是794×112

制作A4纸打印的网页像素大小设置(转)

公司内做系统,要用A4纸打印东西,A4纸标准时mm,换算成像素不知道.网上找找,找到一篇文章,转一下,备用. A4纸的尺寸是210mm*297mm,也就是21.0cm*29.7cm,而1英寸=2.54cm,如果屏幕DPI分辨率为72像素/英寸,换算一下:相当于1cm可呈现 (72px/2.54cm) = 28.34px 下面是一些常用分辨率下A4纸在屏幕上的像素尺寸: 分辨率是72像素/英寸时,A4纸的尺寸的图像的像素是595×842: 分辨率是96像素/英寸时,A4纸的尺寸的图像的像素是794

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

计算方式一般的分辨率为XX像素/英寸,其中一英寸为25.4毫米.所以一毫米的像素数就为XX/25.4.现在的工作就是求XX的值了,把XX的值求出来以后,直接用XX/25.4 * 210就得到A4纸的像素宽了. A4纸的尺寸是210mm×297mm. 分辨率是72像素/英寸时,A4纸的尺寸的图像的像素是595×842(推荐用这个大小比例).  分辨率是150像素/英寸时,A4纸的尺寸的图像的像素是1240×1754. 分辨率是300像素/英寸时,A4纸的尺寸的图像的像素是2479×3508. 选择

PCB原比例打印到A4纸

最近在画一个四旋翼的PCB板子画完后想打印到A4纸上看看器件摆放的是否合理,因为我的电脑没有连接打印姐直接打印就没办法了,就直接用AD的智能PDF输出PDF格式的板子文件去打印,结果是打印出来的板子经过了放大失去了原来的比例.这样就失去了打印的意义了么.后来又发现一种比较方便了方法,在AD中  文件-页面设置-缩放比例-缩放模式选择Scale print 比例选择1:1-预览-打印-打印机选择名称为 Microsoft XPS Document Write ,这是Windows的一个文档管理软件

Vue中使用Element-UI实现表格跨页多选

跨页多选翻页保存问题折磨了我一天,终于找到了合适的解决方法分享一下. 需求: 项目中使用Element-UI: 表格中数据通过网络请求得到: 给后台接口发送页码(pagenum)和每一页条数(pagesize)实现数据分页: 实现单页内全选 翻页保存之前选中的数据 解决方式: 使用官方文档中提供的row-key属性和reserve-selection属性搭配使用 在表格中设置row-key属性,并将该属性设置为当前渲染数据的json中的唯一标识(比如id之类,我的例子里字段名叫bridgecod

Web打印连续的表格,自动根据行高分页

拿到这个需求,我已经蛋碎了一地,经过N天的攻克,终于是把它搞定了,只是不知道会不会在某种情况下出现BUG.表示我心虚没有敢做太多的测试.... ----------------------------------------------------------废话分割线----------------------------------------------------------- 注:我们的系统是基于ligerui这个一堆bug的插件的. 详细需求: 1.任意一个表格,行高不均匀且不相等:

A4纸的象素分辨率计算[转]

在公制长度单位与屏幕分辨率进行换算时,必须用到一个DPI(Dots Per Inch)指标.在Windows系统的网页打印中默认采用的是96dpi,Mac系统中默认的是72dpi. A4纸张的尺寸是210×297mm,按1英寸=25.41mm换算,即8.264×11.688英寸 所以,A4纸96dpi下的分辨率是794×1123,这就是我们在制作网页的时候需要的象素. 理想情况下,打印页边距为0mm 时,网页内最大元素的分辨率:794×1123<div style="width:794px

A1,A2,A3,A4纸的幅面规格

纸张幅面规格: 纸张的规格是指纸张制成后,经过修整切边,裁成一定的尺寸.过去是以多少"开"(例如8开或16开等)来表示纸张的大小,现在我采用国际标准,规定以 A0.A1.A2.B1.B2......等标记来表示纸张的幅面规格.标准规定纸张的幅宽(以X表示)和长度(以Y表示)的比例关系为X:Y=1: . 按 照纸张幅面的基本面积,把幅面规格分为A系列.B系列和C系列,幅面规格为A0的幅面尺寸为841mm×1189mm,幅面面积为1平方米:B0的幅面尺 寸为1000mm×1414mm,幅面