Question

我需要在A4纸上打印，每个<div>从不同页面开始

<div id="1">
  //content
 </div>
 
 <div id="2">
  //content
 </div>
 
 <div id="3">
  //content
 </div>
 
 ....

例如，<div id="1">的内容可能是2或3页，但<div id="2">仍需要在新页面上开始。

Answer 1

在你的CSS中：

#1 {page-break-after: always;}
#2 {page-break-after: always;}
#3 {page-break-after: always;}

其中＃1是你的div的ID

Answer 2

您可以使用以下css：

div {
  page-break-after: always;
}

page-break-after属性设置是否应在指定元素之后发生分页符。

阅读本文以获取完整信息 - https://www.w3schools.com/cssref/pr_print_pageba.asp

Answer 3

不要使用JavaScript，请使用CSS：

@media print {
  /* top-level divs with ids */
  body > div[id] {
    page-break-before: always;
  }
}

这会使用media query和page break property来确保带<div>的非空id在查看（或打印）时始终在新页面上启动在paged media。

将以下内容另存为HTML文件，然后使用打印对话框在浏览器中将其打开。您会看到每个<div>都在新页面上开始：

<!DOCTYPE html>
<html>
<head>
  <style>
    @media print {
      /* top-level divs with ids */
      body > div[id] {
        page-break-before: always;
      }
    }
  </style>
</head>
<body>
  <div id="1">
    content
  </div>

  <div id="2">
    content
  </div>

  <div id="3">
    content
  </div>
</body>
</html>

Javascript在不同的页面上打印多个div

3 个答案: