jqprint控制打印内容每一页都带有表头怎么解决?

诗且远方
推荐于2019-10-27 · TA获得超过5608个赞
知道小有建树答主
回答量:2708
采纳率:59%
帮助的人:181万
展开全部

解决步骤如下。

  1. 打印预览;在需要打印的表格先点击打印预览,看下自己需要打印的内容是否都完整的在一页一页上面。

  2. 选择页面布局;预览之后都完整,开始进行打印标题操作。选择页面布局之后点击里面打印标题。

  3. 打印区域选择;点击打印标题后会出现一个页面设置框,选择里面工作表,点击打印顶端标题。这里要注意下是顶端标题不要选择错了。

  4. 顶端标题选择;点击打印顶端标题箭头后出现一条小框,在你刚才需要打印excel表格里面选择第一行标题,在小框里面就会出现$1:$1,意思就是选择了要打印的顶端标题区域。

  5. 确认标题;选择好打印区域后,点击小框旁边键就返回到页面设置框,就看到顶端标题已经有了,点击确定。

  6. 预览完成;确认好后再次预览,翻到后面几页看下就已经有顶端标题了。如果要打印前面两行标题,就在选择区域的时候选择前面2行就可以了!最后再完成打印就可以了。

梦丶丶幽魂
2018-01-21 · TA获得超过6563个赞
知道小有建树答主
回答量:20
采纳率:0%
帮助的人:3083
展开全部

jqprint是一个基于jQuery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害,最近的项目中帮了我的大忙,在Web打印的方面,前端的打印基本是靠window.print()的方式进行打印的,而这个插件在其基础上进行了进一步的封装,可以打印网页上的某个区域,这是个亮点。比如说现在要打印如下的一个效果:

我们可以通过写代码完成上述的效果,然后单击网页上的某个按钮,在按钮的处理方法里调用jqprint(),来完成这个区域的的打印显示的操作,首先要获取这个区域,然后调用一个方法即可了,如下所示:


[javascript] view plain copy print?
$("#visaReport").jqprint({}); 

这就是一个简单的操作,但是实际需要的时候,有时我们页面显示样式和我们打印的样式是有些区别的,幸好CSS声明的地方提供了一个media的属性,我们可以指定其输出的方式为print,即media=print的这个属性,写了这个属性之后,所引入CSS的一些样式在打印的时候才会生效了,通过在打印的时候,我们可以通过样式去改变当前网页的显示内容,及显示的样式。先来看下代码吧!

[html] view plain copy print?

<!DOCTYPE html>

<html> 

<head> 

<metacharsetmetacharset="UTF-8"/>

<title>效果测试</title> 

<linkhreflinkhref="printShou.css" rel="stylesheet"type="text/css" media="print"/>

<scripttypescripttype="text/javascript"src="jquery-1.7.2.js"></script>

<scripttypescripttype="text/javascript"src="jquery.jqprint-0.3.js"></script>  

<scripttypescripttype="text/javascript">  

$(function()  

{  

$("#btn1").click(function()  

$("#visaReport").jqprint({});  

});  

}); 

</script> 

</head>  

<body> 

<input type="button"id="btn1" value="打印"/>  

<divclassdivclass="visaReport" id="visaReport"> 

<divclassdivclass="visa_head"> 

<divclassdivclass="visa_head_title">XX中心</div>

<divclassdivclass="visa_head_title">确认及收据</div> 

</div> 

<divclassdivclass="visa_body"> 

<div> 

<divclassdivclass="visa_person"> 

<div class="visa_label">姓名:xiaoming</div> 

<div class="visa_label">日期:2014/12/30</div> 

</div>  

<td>项</td><td>价格</td> 

</tr> 

<tr> 

<td>服务费</td><td>119.00RMB</td> 

</tr> 

<tr> 

<td>快递费</td><td>130.00R</td> 

</tr>  

</table> 

<tableclasstableclass="visa_total_fee">  

<tr> 

<tdstyletdstyle="width:207px;">Total/总计</td><td>240.00RMB</td>  

</tr> 

</table>  

</div>                    

</div>  

</div> 

</body> 

</html> 

现在网页中的页面的样式是这样的:

而打印出来的效果确是第一张图的样式,这就是指定了media=print这个属性之后,打印的时候会加载一个css文件所配置的。如下所示:

[html] view plain copy print?
<link href="printShou.css" rel="stylesheet"type="text/css" media="print"/>

jqprint这个插件能够解决我们大部分开发中,Web页面打印的问题,打印的样式也是可控的。有时需要我们要为其指定一些属性,才能完成需要的效果默认是有如下的四个属性:

[javascript] view plain copy print?

debug: false,//如果是true则可以显示iframe查看效果(iframe默认高和宽都很小,可以再源码中调大),默认是false  

importCSS: true, //true表示引进原来的页面的css,默认是true。(如果是true,先会找$("link[media=print]"),若没有会去找$("link")中的css文件)  

printContainer: true,//表示如果原来选择的对象必须被纳入打印(注意:设置为false可能会打破你的CSS规则)。 

operaSupport: true//表示如果插件也必须支持歌opera浏览器,在这种情况下,它提供了建立一个临时的打印选项卡。默认是true 

如果在项目的开发中,不是要求太高的化,我想通过这个插件可以解决我们目前遇到的一些打印的问题。这个插件的操作也是特别的简单的,通过这个插件,大部分的 页面,我们都可以按照想要的样式打印出来。

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式