900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 页面打印插件 jquery.jqprint.js 插件使用实例

页面打印插件 jquery.jqprint.js 插件使用实例

时间:2020-06-14 20:40:13

相关推荐

页面打印插件 jquery.jqprint.js 插件使用实例

页面打印插件 jquery.jqprint.js 插件使用实例

jquery.jqprint.js 插件下载

jqprint 是一个基于jQuery编写的页面打印的一个小插件,可以对页面指定元素的内容进行打印,使用非常方便。

很多小伙伴使用的时候会出现 “Cannot read property ‘opera’ of undefined” 错误问题,这是jqery使用版本过高出现的兼容问题。

这时候需要引入 jquery 迁移辅助插件<script src="/jquery/jquery-migrate-1.2.1.min.js"></script>即可解决。

页面使用demo

<!DOCTYPE html><html lang="en" xmlns:th=""><head><title>Title</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"><!-- 引入打印样式 --><!-- <link th:href="@{/static/css/print.css}" rel="stylesheet" type="text/css" media="print">--><script th:src="@{/static/js/jquery.min.js}"></script><!-- 解决jq迁移兼容问题 --><script src="/jquery/jquery-migrate-1.2.1.min.js"></script><script th:src="@{/static/js/jquery.jqprint-0.3.js}"></script></head><body style="padding: 20px;" ><p>打印表单</p><div id="table_html" style="text-align: center;"><table class="layui-table color-success"><colgroup><col width="100"><col width="200"><col width="200"><col></colgroup><thead><tr><th>序号</th><th>动漫</th><th>主角</th></tr></thead><tbody><tr><td>1</td><td>猫和老鼠</td><td>Tom & Jerry</td></tr><tr><td>2</td><td>蜡笔小新</td><td>野原新之助</td></tr><tr><td>3</td><td>足球小将</td><td>大空翼</td></tr><tr><td>4</td><td>宠物小精灵</td><td>小智</td></tr></tbody></table></div><div style="text-align: center"><button class="layui-btn" id="print_btn">打印table</button></div><script type="text/javascript">$("#print_btn").click(function(){$("#table_html").jqprint({//debug 如果是true则可以显示iframe查看效果(iframe默认高和宽都很小,可以再源码中调大),默认是falsedebug: false,//importCSS true表示引进原来的页面的css,默认是true。(如果是true,先会找$("link[media=print]"),若没有会去找$("link")中的css文件)importCSS: true,//printContainer 表示如果原来选择的对象必须被纳入打印(注意:设置为false可能会打破你的CSS规则)printContainer: true,//operaSupport 表示如果插件也必须支持谷歌opera浏览器,在这种情况下,它提供了建立一个临时的打印选项卡。默认是trueoperaSupport: true});});</script></body></html>

页面展示效果

打印效果

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。