简单易用的JQuery网页内容打印插件——jQuery.print.js

最新推荐文章于 2023-07-21 16:23:16 发布

zgphacker2010

最新推荐文章于 2023-07-21 16:23:16 发布

阅读量1.3k

点赞数

分类专栏： JS&JQuery 文章标签： jQuery打印

原文链接：https://blog.csdn.net/fukaiit/article/details/79406114

版权

JS&JQuery 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

1. 官方网址

下载jQuery.print.js、配置参数介绍、官方Demo

2. 简介：

jQuery.print是一款简单易容且功能强大的网页内容打印jQuery插件。该网页打印插件可以打印指定区域的网页元素，可以指定跳过不打印某些元素，还可以打印整个页面内容。并且提供了丰富的打印参数设置。

3. 浏览器兼容性：

Google Chrome - v 20, 26, 48, 55
Internet Explorer - v 10, 11
Firefox - v 35

4. 使用方法：

1）引入jQuery和jquery.print.js文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.print.js"></script>

（2）打印

$("#myElementId").print(/*options*/);

或者

$.print("#myElementId" /*, options*/);

参数配置：

$("#myElementId").print({
    globalStyles: true,//是否包含父文档的样式，默认为true
    mediaPrint: false,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
    stylesheet: null,//外部样式表的URL地址，默认为null
    noPrintSelector: ".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
    iframe: true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
    append: null,//将内容添加到打印内容的后面
    prepend: null,//将内容添加到打印内容的前面，可以用来作为要打印内容
    deferred: $.Deferred()//回调函数
});

原文链接：https://blog.csdn.net/fukaiit/article/details/79406114

个人简历打印例子（实现打印功能）

先看看效果吧，点击网页上的‘打印’按钮，就跳转到打印预览界面，在打印预览界面点击打印才是真正的连接打印机打印网页上的内容了。

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一份简历</title>
</head>
<body>
<div id="ele1">
	<table  width="650" height="850" border="1" cellpadding="0" cellspacing="0" style="font-size:14px" align="center">
	    <caption><h3>个人简历</h3></caption>
	    <tr>
	        <td width="92">姓名:</td>
	        <td width="100">张三</td>
	        <td width="89">出生日期:</td>
	        <td width="113">2017年4月20日</td>
	        <td width="91">性别:</td>
	        <td width="48">男</td>
	        <td width="121" rowspan="5" background="images/pic.jpg"></td>
	    </tr>
	    <tr>
	        <td>身份证:</td>
	        <td>XXX</td>
	        <td>户口:</td>
	        <td>****</td>
	        <td>未婚状况:</td>
	        <td>未婚</td>
	    </tr>
	    <tr>
	        <td>学历:</td>
	        <td>本科</td>
	        <td>身高:</td>
	        <td>175cm</td>
	        <td>体重:</td>
	        <td>60kg</td>
	    </tr>
	    <tr>
	        <td>专业:</td>
	        <td>计算机科学与技术</td>
	        <td>身高:</td>
	        <td>汉</td>
	        <td>政治面貌</td>
	        <td>团员</td>
	    </tr>
	    <tr>
	        <td height="24" colspan="2">家庭住址:</td>
	        <td colspan="4">江西省赣州市</td>
	    </tr>
	    <tr>
	        <td>手机号码:</td>
	        <td colspan="2">138********</td>
	        <td>个人主页:</td>
	        <td colspan="3">XXXXXX</td>
	    </tr>
	    <tr>
	        <td>固定电话:</td>
	        <td colspan="2">0431-********</td>
	        <td>电子信箱:</td>
	        <td colspan="3">***@**.com</td>
	    </tr>
	    <tr height="100">
	        <td>教育经历:</td>
	       <td colspan="6">
	           小学............<br/>
	           初中............<br/>
	           高中............<br/>
	           大学............<br/>
	       </td>
	    </tr>
	    <tr>
	        <td>外语水平:</td>
	        <td colspan="6">外语语种:英语&nbsp;&nbsp;掌握程度:良好&nbsp;&nbsp;口语能力:一般&nbsp;&nbsp;考级:四级</td>
	    </tr>
	    <tr>
	        <td colspan="7" align="center"><b>工作经历</b></td>
	    </tr>
	    <tr align="center">
	        <td colspan="2">工作时间</td>
	        <td colspan="2">工作单位</td>
	        <td colspan="2">工作职位</td>
	    </tr>
	    <tr>
	        <td colspan="2">2016-2017</td>
	        <td colspan="2">****科技有限公司</td>
	        <td colspan="2">Java程序员</td>
	    </tr>
	    <tr height="100">
	        <td>工作描述:</td>
	        <td colspan="7">根据自己的实际情况填写</td>
	    </tr>
	    <tr>
	        <td colspan="7" align="center"><b>项目经验</b></td>
	    </tr>
	    <tr>
	        <td colspan="7" height="100">根据自己的实际情况填写</td>
	    </tr>
	    <tr>
	        <td colspan="7" align="center"><b>自我评价</b></td>
	    </tr>
	    <tr>
	        <td colspan="7" >
	            能吃苦耐劳，对待工作，学习，人生积极乐观。有坚毅的性格和强烈的责任心，集体荣誉感强
	            诚实守信，具有团队协作能力，创新意识<br/>
	
	        </td>
	    </tr>
	    <tr>
	        <td colspan="7" align="center"><b>求职意向</b></td>
	    </tr>
	    <tr>
	        <td>工作地点:</td>
	        <td colspan="6">广州市</td>
	    </tr>
	    <tr>
	        <td>意向行业:</td>
	        <td colspan="6">计算机/互联网/通信/电子</td>
	    </tr>
	    <tr>
	        <td>意向岗位:</td>
	        <td colspan="6">本专业相关或相近的工作职位</td>
	    </tr>
	    <tr>
	        <td>工作要求:</td>
	        <td colspan="6">面议</td>
	    </tr>
	</table>
</div>
<div align="center">
	<button class="scbtncity" id="print" >打印</button>
</div>		
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jQuery.print.js"></script>
<script type='text/javascript'>
    //<![CDATA[
    $(function() {
        $("#print").on('click', function() {
            $.print("#ele1");
        });
    });
    //]]>
</script>
</body>
</html>

注意事项：

1、要使用打印预览功能需要浏览器的支持，可以使用谷歌、火狐等浏览器。IE浏览器不支持打印预览功能，点击网页上的‘打印’功能后，直接跳转到打印机选项里了。

2、网页上的打印一般使用A4纸打印。然而打印显示分为横向打印和纵向打印，默认是纵向打印。因为打印纸有宽度和高度之分，所有横向打印和纵向打印是有区别的，需要根据打印的不同，对网页的内容进行调整。这里给出项目里的宽度高度值作为参考：（不一定是最标准的，根据项目中打印的内容进行调整）

纵向打印：宽度：650px 高度：850px

横向打印：宽度: 1000px 高度：650px

当然，不同浏览器之间打印预览效果可能会不相同，但也是结合实际打印出来的效果，再做调整。

3、上面的打印功能只有打印单页，如果打印多页要怎么办呢。

打印多页：项目中使用第一种方式

a.如果规则内容的，像项目中是打印列表的，可以将表格数据按每一页（20条）进行循环分页，所以每页表格内容及打印页的宽度高度基本可以固定。每页后面添加 <div style="page-break-after: always;"></div> 关键性代码。详细内容请上网搜索

b.如果像demo中那样，也是是表格的形式显示打印数据，如果打印多页不做任何处理的话，如果一个div的内容太多，刚好在这个内容上分页了，那么打印的处理内容将会很难看（第一页表格最后一项没有横线了，第二页第一项没有横线）。可以观察word工具插入表格让其分成两页，实际上是会自动加上表格行结束符的（横线）。处理方式：需要根据打印的高度计算出第二页内容、第三页内容等在什么位置，然后在分页位置添加 <div style="page-break-after: always;"></div> 关键性代码。（未实现，内容仅供参考，或者参考其他网站的打印功能）

源码已经打包到百度云盘，下载地址：

链接：https://pan.baidu.com/s/1W3bjnBM8yB3E0ofqk7-RqA
提取码：l0kr
复制这段内容后打开百度网盘手机App，操作更方便哦

zgphacker2010

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
简单易用的JQuery网页内容打印插件——jQuery.print.js

1.官方网址下载jQuery.print.js、配置参数介绍、官方Demo2. 简介：jQuery.print是一款简单易容且功能强大的网页内容打印jQuery插件。该网页打印插件可以打印指定区域的网页元素，可以指定跳过不打印某些元素，还可以打印整个页面内容。并且提供了丰富的打印参数设置。3. 浏览器兼容性：Google Chrome - v 20, 26, 48, 55...
复制链接

扫一扫