js 打印不分页打印设置

在JavaScript中实现不分页打印设置，通常涉及到调整打印样式以确保内容能够完整地显示在单页上，而不是被分割到多页。以下是一些基础概念和相关步骤：

基础概念

打印样式表（Print Stylesheet）：这是一种特殊的CSS样式表，用于控制打印时的页面布局和样式。
@media print：这是一个CSS媒体查询，用于指定当页面被打印时应用的样式规则。

类型与应用场景

文档打印：如报告、合同等需要完整页面显示的文档。
网页打印：确保网页内容在打印时不出现分页问题。

实现步骤

以下是一个简单的示例，展示如何通过CSS和JavaScript实现不分页打印设置：

CSS部分

@media print {
  body {
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .no-break {
    page-break-inside: avoid;
  }
}

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>不分页打印示例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="no-break">
    <!-- 这里放置需要打印的内容 -->
    <h1>这是一个标题</h1>
    <p>这是一段很长的文本，我们希望它在打印时不会被分割到不同的页面。</p>
  </div>
  <button onclick="printPage()">打印</button>

  <script>
    function printPage() {
      window.print();
    }
  </script>
</body>
</html>