js 调取浏览器打印分页_js打印时页脚显示页码-CSDN博客

本文探讨如何在JavaScript中调用浏览器打印功能，并通过CSS解决打印时隐藏特定元素的问题。同时，文章介绍如何实现打印自动分页，指出在元素设置overflow属性时可能影响分页效果，建议移除相关元素的overflow属性以确保正确分页。

在浏览器中，可以调用Bom中的打印方法，来实现调用浏览器的打印。

window.print();

但是打印时显示了打印按钮，希望在打印时隐藏相关元素

这个可以通过css样式来解决，如下

/* 通过设置 media='print' 在打印界面启用 */
<style media="print" type="text/css">
     /* 通过设置不可见和高度为0的样式，在打印时隐藏 */
    .noprint{visibility:hidden; height:0mm;}
</style>

在style标签里，声明media属性为print，以标明样式在打印时启用

打印自动分页

一般页面内容超出视图时，希望页面自动分页，可是在默认打印预览时并没有分页，如下

上图中，有块设置overflow属性的div,在直接调取window.print时，并未将子Div的 “最底下一行字2”在打印框里显示出来。

Dom构造如下：

<body style="height: 100%;width: 100%;margin: 0;">
    <button class="noprint" onclick="javascript:window.print();">直接打印</button>
    <!-- 设置了overflow属性 -->
    <div style="height:90%;overflow: scroll;border:1px solid;" id="divPrint">
        <h2>有overflow滚动的DIV</h2>
        <div style="height:1200px;background: red;">撑高的DIV</div>
        <h1>最底下一行文字2</h1>
    </div>
</body>

而如果将div的overflow属性进行剔除，再进行打印

所以如果想让浏览器的打印自动分页，需要将body内相关子元素的overflow属性都进行剔除

打印的相关例子：

<html lang="en" style="height: 100vh;">

<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 media="print" type="text/css">
        /* 设置打印页相关页面样式 */
        @page {
            size: auto;
            margin: 0mm;
            page-break-after: auto;
            margin-top: 7mm;
            margin-bottom: 5mm;

        }

        /* 通过设置不可见和高度为0的样式，在打印时隐藏 */
        .noprint {
            visibility: hidden;
            height: 0mm;
        }
    </style>
</head>

<body style="height: 100%;width: 100%;margin: 0;">
    <button class="noprint" onclick="javascript:window.print();">直接打印</button>
    <button class="noprint" onclick="onPrintWithoutOf();">去除overflow打印</button>
    <!-- 设置了overflow -->
    <div style="height:90%;overflow: scroll;border:1px solid;" id="divPrint">
        <h2>有overflow滚动的DIV</h2>
        <div style="height:1200px;background: red;">撑高的DIV</div>
        <h1>最底下一行文字2</h1>
    </div>
    <script>
        function onPrintWithoutOf() {
            document.getElementById('divPrint').style.overflow = '';
            window.print();
        }
    </script>
</body>

</html>