使用jqprint插件实现打印

一、jqprint

jqprint是一个简单好用的打印插件，可以实现局部打印。

二、如何使用

1. 首先需要引入jquery的js文件和jqprint的js文件：

<script type="text/javascript" src="/static/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/static/js/tmpl/jquery.tmpl.min.js"></script>

jquery-1.8.3.min.js下载
jquery.tmpl.min.js下载

2. 提供要打印的div区域

我这里是id 为 page_view 的div

3. js实现打印

其中参数：

debug: false,//如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是falseimportCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）printContainer: true,//表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）operaSupport: false//表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true

4. 打印目标的css样式

如果 importCSS是false,只会打印html里面style的css修饰，不会打印head标签或者外部引入的css，如果设置为true，就可以打印外部的css属性。

<link rel="stylesheet" href="../../css/fh.css" media="print"> <!-- 这个表示只有打印的时候才会显示css效果 -->

也就是说如果要指定打印目标的样式就要在引入css文件的时候加上 media=“print”

5. 打印时显示背景颜色及隐藏页眉页脚

/* 打印时有背景颜色 */
body {-webkit-print-color-adjust: exact;
}/* 去页眉页脚 */
@page {size: auto;margin: 0 30px;
}

使用jqprint插件实现打印相关推荐

使用jqprint插件实现打印页面内容
业务场景客户需要在页面有一个打印按钮,点击之后可以打印Echarts图表的内容以及文字提示信息,经谷歌搜索发现,实现方法大概有三种之多,其他两种不太熟悉,而采用的这种打印方式是一个在jQuery的基 ...
使用jqprint插件完成页面打印
使用jqprint插件完成页面打印 jqprint是一个基于jQuery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害,最近的项目中帮了我的大忙,在Web打印的方面,前端的打印基本是靠w ...
Jqprint实现页面打印
好些项目需要实现页面打印,特别是一些后台管理类系统,下面介绍一款轻量级的打印插件: 1.实现页面打印要引入jQuery和Jqprint.点击下载Jqprint插件 <scriptlanguage ...
Leaflet中使用leaflet.easyPrint插件实现打印效果
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
lodop打印不显示页码_Lodop插件实现打印功能
下载lodop插件实现打印功能(element-ui框架) 一.vuejs弹窗部分 <el-dialog title="打印" width="960px" ...
C-Lodop打印插件批量打印thinkphp打印fastadmin打印
C-Lodop打印插件批量打印thinkphp打印fastadmin打印 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN ...
android三星打印插件,三星打印服务插件
三星打印服务插件软件是一款非常专业的打印服务软件,这款软件功能强大,可以直接线上编辑打印内容.修改尺寸等,支持M2020/M2070.C410/C460.SF-650,SF-760等系列打印机使用.有 ...
前端使用lodop插件进行打印设置
先前梳理了后台打印导出参考:https://www.cnblogs.com/yyk1226/p/9856032.html,但是没有显示出来打印预览页面. 本章使用Lodop插件进行打印设置,实现打印机 ...
处理jquery.jqprint.js不能打印input、textarea区以及样式问题
处理jquery.jqprint.js不能打印input.textarea区以及样式问题对于打印区的input和textarea做一下处理: 处理打印样式问题(打印样式与显示样式不一样) 对于打印区 ...