javascript打印大全(打印页面设置/打印预览代码)

2023年5月19日下午6:00 • JavaScript

下面是详细讲解“javascript打印大全(打印页面设置/打印预览代码)”的攻略：

打印页面设置

打印页面设置主要是使用window.print()方法，这个方法用于打印当前页面。在使用window.print()前，我们常常需要设置一些打印页面参数，如纸张大小、边距、横向还是纵向等等。

设置纸张大小

@media print {
  @page {
    size: A4; /* 设置打印纸张大小为A4 */
  }
}

上述代码中，@media print 表示该段CSS样式只在打印的时候生效，@page 表示对应每一页要执行的样式。size 属性可以设置打印纸张的大小。

设置打印页面边距

@media print {
  @page {
    margin: 2cm 1.5cm; /* 设置打印页面左右边距2cm，上下边距1.5cm */
  }
}

上述代码中，margin 属性可以设置打印页面的边距。注意，值得是css中的长度单位。在打印时，1cm = 28.34646px，1in = 96px。

设置打印方向

@media print {
  @page {
    size: landscape; /* 将打印方向设置为横向 */
  }
}

上述代码中，size 属性可以接受的值除了设置纸张大小外，还可以设置方向，比如将 size: landscape;设置为横向打印。

打印预览代码

设置打印参数后，我们需要进行打印预览操作，打印预览操作可以使用 window.print()来实现：

window.print();

示例1

下面是一个完整的打印页面设置和打印预览的示例代码：

<body>
  <h1>Hello, world</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <script>
    // 打印页面设置代码
    @media print {
      @page {
        size: A4;
        margin: 2cm 1.5cm;
      }
    }

    // 打印预览代码
    window.print();
  </script>
</body>

上述代码中，@media print用来设置打印页面参数，window.print();用来实现打印预览操作。

示例2

下面是一个完整的打印日历页面设置和打印预览的示例代码：

<body>
  <div class="calendar">
    <!-- 日历页面的HTML代码 -->
  </div>

  <script>
    // 打印页面设置代码
    @media print {
      @page {
        size: A4;
        margin: 2cm 1.5cm;
      }

      .calendar {
        /* 隐藏日历页面中不需要打印的元素 */
        display: none;
        /* 设置日历的字体和大小 */
        font-family: Arial, sans-serif;
        font-size: 18px;
        color: #333;
      }
    }

    // 打印预览代码
    window.print();
  </script>
</body>

上述代码中，首先定义了一个 .calendar 样式，用于隐藏不需要打印的元素，然后通过 @media print 来应用这个样式。同时，还可以设置日历页面的字体、大小和颜色等。最后，使用 window.print(); 实现打印预览操作。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript打印大全(打印页面设置/打印预览代码) - Python技术站