页面打印插件 jquery.jqprint.js 插件使用实例
页面打印插件 jquery.jqprint.js 插件使用实例
jquery.jqprint.js 插件下载
jqprint 是一个基于jQuery编写的页面打印的一个小插件,可以对页面指定元素的内容进行打印,使用非常方便。
很多小伙伴使用的时候会出现 “Cannot read property ‘opera’ of undefined” 错误问题,这是jqery使用版本过高出现的兼容问题。
这时候需要引入 jquery 迁移辅助插件 <script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script>
即可解决。
页面使用demo
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script><script th:src="@{/static/js/jquery.jqprint-0.3.js}"></script>
</head>
<bodystyle="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>
<divstyle="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>
页面展示效果
打印效果
页面打印插件 jquery.jqprint.js 插件使用实例相关推荐
- ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js
插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传 jquery.imageuploader.js 一款jquery多文件上传插件. ...
- jQuery插件 -- Cookie插件jquery.cookie.js(转)
2019独角兽企业重金招聘Python工程师标准>>> jQuery插件 -- Cookie插件jquery.cookie.js(转) Cookie是网站设计者放置在客户端的小文本文 ...
- jquery.validate.js插件的使用方法
近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" ...
- html响应式布局平移,jQuery图片内部缩放和平移插件jquery.zoom.js
插件描述:jquery.zoom.js是一款非常实用的图片内部缩放和平移jQuery插件.该插件可以鼠标滑过图片,点击图片或移动手机上触摸图片时,将图片进行放大或平移操作. 简要教程 jquery.z ...
- 图片裁剪上传插件—jquery.photoClip.js
分别介绍了两种插件 1.cropper.js 具体详情:https://segmentfault.com/a/1190000012344970 (1)在页面直接使用cropper 接下来只是实现一个简 ...
- html让gif图片暂停,控制gif图片播放暂停插件-jquery.gif.js
插件描述:jquery.gif.js是一款可以对Gif图片进行预览和播放的jQuery插件. 效果预览: Gif图片预览和播放jQuery插件-jquery.gif.js 简要教程 jquery.gi ...
- jquery二维码生成插件jquery.qrcode.js在线生成二维码
一代巨匠金庸先生驾鹤西去,谢谢您的作品,陪我度过儿时的时光 –2018.10.31 一.场景再现 由于业务需求,经常会将访问链接分享给别人,方便其他客户访问我们的业务.在本周的需求中,我们需要根据地址 ...
- php 轮播图插件下载,jquery全屏响应式轮播图插件jquery.flexslider.js
在zblogPHP主题 yunduan 上使用这个轮播幻灯片插件jquery.flexslider.js,分享下使用方法: 这是一款jquery全屏响应式淡入淡出效果轮播图插件.该轮播图插件简单实用, ...
- JQuery Easing.js插件
jQuery Easing.js 插件 介绍:easing是jquery的一个插件,使用它可以创建更加绚丽的动画效果. 环境:因为easing是jQuery的插件,所以必须是在引入jquery之后再引 ...
最新文章
- docker里面装mysql_docker中安装及使用mysql
- VScode 汉化以及侧栏npm脚本显示
- php中的echo、print,print_r、var_dump
- 成功安装mysql后,为何服务管理器里找不到MySQL服务名(解析篇)
- linux nightshift调整,iOS9.3夜间模式怎么设置?iOS9.3 Night Shift设置教程
- 87-Moving average of oscillator,移动平均振荡指标.(2015.7.4)
- NO.5 计算数组中三个数的最大乘积
- 关于 Matlab R2014a下载与安装流程
- OS X Eagle Peak:据说这是 Mac 新系统名称
- Hexo及Next主题配置(最新版)
- cocos2d-lua 3x 基础概念(包括场景、导演、在屏幕上显示自定义对象等)
- AWS中负载均衡器类型
- Flink 与 Storm的对比
- MongoDB分片机制
- 如何用python群发工资条
- 【Free5GC】test.sh脚本测试流程
- bootstrap 黑边框表格样式_bootstrap4 使用及常用样式详细整理
- python接外包项目_微信外包项目,接口开发流程小记
- folly::ConcurrentSkipList 详解
- 构造方法调用另一个构造方法