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

时间:2017-07-03 13:01:06

标签: html css media-queries css-paged-media

我需要在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">仍需要在新页面上开始。

3 个答案:

答案 0 :(得分:4)

在你的CSS中:

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

其中#1是你的div的ID

答案 1 :(得分:0)

您可以使用以下css:

div {
  page-break-after: always;
}

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

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

答案 2 :(得分:0)

不要使用JavaScript,请使用CSS:

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

这会使用media querypage 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>