JS实现打印

实现代码:

HTML:
<button type="reset" id="printBtn" class="btn btn-success btn-embossed">打印</button>
JS:
$("#printBtn").click(function () {
                window.print();
         })
//是不是很简单

第二种:

A页面:
<body style="text-align: center">

<button type="button" id="printBtn">打印</button>

<iframe frameborder="0" src="" id="printFrame" style="width: 0;height: 0;"></iframe>

<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $("#printBtn").click(function () {
        $("#printFrame").attr('src','./B.html');//打印B页面
    })
</script>
</body>

B页面
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="print">
        html{
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body style="padding: 0;margin: 0;height: 100%;width: 100%;">
    <div id="printBody" style="width: 100%;height: 100%;">

    </div>


<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    //一些填充数据
    var pdata = [
        {"id":"productId","top":"95","left":"20"},
        {"id":"customer","top":"120","left":"80"},
        {"id":"dfadfa","top":"150","left":"50"}
    ]
    var infoHtml = '';
    for (var i = 0;i<pdata.length;i++){
        var top1 = (pdata[i].top/176)*100+'%';
        var left = (pdata[i].left/261)*100+'%';
        infoHtml += '<span style="display:block;position:absolute;top:'+top1+';left:'+left+';">'+pdata[i].id+'</span>';
    }
    $("#printBody").html(infoHtml);

    window.print();//打印
</script>
</body>
</html>