版权声明:本文为博主原创,转载加个原文章链接。 https://blog.csdn.net/xiaolongbaobushibao/article/details/54583845
一、打印方法(试用于谷歌浏览器,51完美运行,53就坑爹了居然样式会乱,但不知道具体什么原因。其他版本未知)
逻辑思路:
1、要打印设置一个触发时间,使当前页面隐藏、把需要打印的URL填到Iframe的SRC并使其显示;
2、设置一个回调函数要隐藏当前iframe、原页面显示、清空Iframe SRC
仅适用于谷歌浏览器
operation.html
<button onclick="feedBackPrint();">测试打印</button>
<iframe id="print" src="" frameborder="no" style="width: 100%; height: 100%; display: none;"></iframe>
operation.js
// 测试打印
function feedBackPrint(){
$("#mainDiv").hide();
$("#print").show();
$("#print").attr("src","/goPrint.do");
}
function printCallBack(){
$("#mainDiv").show();
$("#print").hide();
$("#print").attr("src","");
}
printPage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>打印反馈单</title>
<script src="jquery.js"/>"></script>
<style>
@page {
size: A4;
margin: 0mm;
@top-left {
display: none;
}
@bottom-center {
display: none;
}
}
.nextPage {
page-break-after: always;
}
</style>
<script type="text/javascript">
$(function () {
//可以从父窗口获取参数key,然后通过Ajax获取数据来显示在这个页面
var key=window.parent.printKey;
var callBack = window.parent.printCallBack;
$("title").text(title);
document.execCommand("print",false,null);
if($.isFunction(callBack)){
callBack(window.parent);
}
});
</script>
</head>
<body>
<div>要打印的内容</div>
</body>
</html>
http://download.csdn.net/detail/xiaolongbaobushibao/9739775
关于 @page
二、强大的JQuery打印工具(兼容IE6到最新版,谷歌火狐也可兼容)
http://download.csdn.net/detail/xiaolongbaobushibao/9739779