如何在Safari中将HTML元素打印为页面？

Question

以下代码应导致每个代码div作为单独的页面打印.每个div被设置为width和height的100%.此HTML页面在除Safari 5.6.1之外的所有浏览器中打印为三页.如何在Safari中修复它？

请将以下代码复制到新文件并进行测试:

<html>
<head>
  <style>
    html,
    body {
      height: auto;
      margin: 0;
      padding: 0;
    }
    input {
      border: 2px solid red;
    }
  </style>
</head>
<body>
  <div style="background-color:red; position:  relative; width:100%;height:100%;">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
  </div>
  <div style="background-color:green; position:  relative; width:100%;height:100%;">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
  </div>
  <div style="background-color:red; position:  relative; width:100%;height:100%;">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
    <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
  </div>
</body>
</html>

Answer 1

解

你应该考虑使用page-break-after.您可以强制每个的分页符div,只需添加的在你的例子page-break-after: always;给你的div造型.

兼容性

如果您检查page-break-after上我可以使用网站,98.26%的浏览器的支持.这包括Safari 5.x和所有其他版本的Safari.

你的HTML

如果要page-break-after内联添加属性,可以使用以下代码:

<div style="background-color:red; position: relative; width:100%; height:100%; page-break-after: always;">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
</div>
<div style="background-color:green; position: relative; width:100%; height:100%; page-break-after: always;">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
</div>
<div style="background-color:red; position: relative; width:100%; height:100%; page-break-after: always;">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
  <input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
</div>

你的守则

如果您只想在用户打印时添加page-break-after到您div的用户,您可以使用@media print CSS查询,如下所示:

@media print {
  div {
    page-break-after: always;
  }
}

值得注意的是,@media查询不能用于内联样式,您必须将其添加到CSS文件或<style>标记之间.

更新的答案

由于Safari 5.x仍然打印五页而不是其他三页,请尝试将以下代码添加到HTML中:

<style>
  @media print {
    div {
      width: auto !important; /* 100% Might be breaking your current code. */
      height: auto !important; /* 100% Might be breaking your current code. */
      page-break-after: always;
    }
  }
</style>

Safari可能会将该值识别为高于100%,从而导致div打印到多个页面.

如果上面的代码不能正常工作,尝试加入height: 50px !important;到div造型和汇报的结果.防爆.什么颜色出现在哪些页面上？

检查Safari

让我们尝试一些自定义代码,看看这是否是Safari 5.x的错误.我们将div使用page-break-after属性创建三个元素.而已.

<!DOCTYPE html>
<html>
<body>
   <div style="page-break-after: always;">Page 1</div>
   <div style="page-break-after: always;">Page 2</div>
   <div style="page-break-after: always;">Page 3</div>
</body>
</html>
</html>

将其粘贴到新的空白HTML文档中,然后保存并尝试打印.Safari还想打印5页吗？如果是这样,这是Safari的一个错误.

如果只打印3页,请尝试position:absolute从input代码中删除.如果这不能解决问题,请慢慢从头开始重建页面,看看是什么代码导致它分成5页.

更多信息

您可以page-break访问W3或CSS-Tricks了解有关这些属性的更多信息.