网页打印去掉页眉页脚

效果截图：
网页打印去掉页眉页脚.gif

整体代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style type="text/css">
        #printArea{
            width: 500px;
            height: 500px;
            margin: 0px auto;
        }
        #printArea img{width: 100%;}
    </style>
    <!--去掉页眉页脚-->
    <style media="print">
           @page {
          size: auto;
          margin: 0mm;
        }
    </style>
</head>
<body>
    <button onclick="printTest()">
        print
    </button>
    <div id="printArea">
        <img src="图片地址 自行更换" alt="" />
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.printarea.js"></script>
<script>
    function printTest(){
        $("#printArea").printArea();
    }
</script>
</html>

此例子打印未使用window.print()，而是使用了插件（打印指定区域）JQuery.printarea，这是项目需要，可以不用管，也可以换成JS系统打印函数。

去掉页眉页脚使用CSS @page，代码为：

<!--去掉页眉页脚-->
<style media="print">
     @page {
     size: auto;
         margin: 0mm;
     }
</style>

已自动关闭评论