使用jqprint插件完成页面打印_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:51:15
原创
2466人浏览过

使用jqprint插件完成页面打印

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


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

ReportPlus数据报表中心小程序
ReportPlus数据报表中心小程序

ReportPlust意在打造一套精美的数据报表模板,里面高度封装日历组件、表格组件、排行榜组件、条形进度条组件、文本块组件以及ucharts的多个图表组件,用户只需要按照虚拟数据的格式,传特定数据即可方便、快捷地打造出属于自己的报表页面。该小程序主要使用了ucharts和wyb-table两插件实现的数据报表功能。 特点使用的是uni-app中最受欢迎的图表uCharts插件完成图表展示,该插件

ReportPlus数据报表中心小程序 0
查看详情 ReportPlus数据报表中心小程序

立即学习前端免费学习笔记(深入)”;

$("#visaReport").jqprint({});
登录后复制

立即学习前端免费学习笔记(深入)”;

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

立即学习前端免费学习笔记(深入)”;

                                   效果测试                                                                             $(function()                     {                            $("#btn1").click(function()                            {                                   $("#visaReport").jqprint({});                            });                     });                                                                                                          XX中心
确认及收据
姓名:xiaoming
日期:2014/12/30
项价格 服务费119.00RMB 快递费130.00R Total/总计240.00RMB
登录后复制

立即学习前端免费学习笔记(深入)”;

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


立即学习前端免费学习笔记(深入)”;

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

立即学习前端免费学习笔记(深入)”;

<link href="printShou.css" rel="stylesheet"type="text/css" media="print"/>
登录后复制

立即学习前端免费学习笔记(深入)”;

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

立即学习前端免费学习笔记(深入)”;

{              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}
登录后复制

立即学习前端免费学习笔记(深入)”;

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


大家都在看:

html如何引用导航_HTML导航栏(nav)引用与复用方法 html缓存内容如何删除_html缓存内容删除的详细说明 如何在Pinegrow中集成HTML Bootstrap框架的详细步骤 Windows用XAMPP搭建HTML本地开发环境教程 如何使用浏览器插件实时处理HTML代码缩进的详细步骤
全能打印神器
全能打印神器

全能打印神器是一款非常好用的打印软件,可以在电脑、手机、平板电脑等设备上使用。支持无线打印和云打印,操作非常简单,使用起来也非常方便,有需要的小伙伴快来保存下载体验吧!

下载
来源:php中文网
收藏 点赞
上一篇:css细节(实习第一天)_html/css_WEB-ITnose 下一篇:Dynamic CRM 2013学习笔记(二十四)页面保存前进行逻辑验证_html/css_WEB-ITnose
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号