前端：chrome浏览器调用打印

一、打印方法（试用于谷歌浏览器，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>

能直接用的DEMO

http://download.csdn.net/detail/xiaolongbaobushibao/9739775

关于 @page

http://www.w3cplus.com/css/designing-for-print-with-css.html

二、强大的JQuery打印工具（兼容IE6到最新版，谷歌火狐也可兼容）

自己写的demo

http://download.csdn.net/detail/xiaolongbaobushibao/9739779

http://www.jq22.com/jquery-info347

前端：chrome浏览器调用打印

猜你喜欢