时间戳

首页 > 解决方案 > 在 preivew/pdf 混合页面布局中通过 css/html/js 打印

javascript - 在 preivew/pdf 混合页面布局中通过 css/html/js 打印

问题描述

参考css横向打印

和下面编辑的代码

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>

  <style>
        body {
  margin: 0;
  background: #CCCCCC;
}

div.A4 {
  margin: 10px auto;
  border: solid 1px black;
  display: block;
  page-break-after: always;
  width: 209mm;
  height: 296mm;
  overflow: hidden;
  background: white;
}

div.A3 {
  margin: 10px auto;
  border: solid 1px black;
  display: block;
  page-break-after: always;
  width: 297mm;
  height: 420mm;
  overflow: hidden;
  background: white;
}

div.A4landscape-parent {
  width: 296mm;
  height: 209mm;
}

div.A3landscape-parent {
  width: 420mm;
  height: 297mm;
}

div.A4landscape {
  width: 296mm;
  height: 209mm;
}

div.A3landscape {
  width: 420mm;
  height: 297mm;
}

div.content {
  padding: 10mm;
}

body,
div,
td {
  font-size: 13px;
  font-family: Verdana;
}

@media print {
  body {
    background: none;
  }
  div.A4 {
    width: 209mm;
    height: 296mm;
  }

  div.A3 {
    width: 297mm;
    height: 420mm;
  }

  div.A4landscape {
    transform: rotate(270deg) translate(-296mm, 0);
    transform-origin: 0 0;
  }

  div.A3landscape {
    transform: rotate(270deg) translate(-296mm, 0);
    transform-origin: 0 0;
  }

  div.A4portrait,
  div.A4landscape,
  div.A4 {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }

  div.A3portrait,
  div.A3landscape,
  div.A3 {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }

}
  </style>

</head>

<body>
<div class="A4">
  <div class="content">
    A4 page in Portrait mode
  </div>
</div>
<div class="A4 A4landscape-parent">
  <div class="A4landscape">
    <div class="content">
      A4 page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
    </div>
  </div>
</div>
<div class="A4">
  <div class="content">
    A4 page in Portrait mode
  </div>
</div>

<div class="A3">
  <div class="content">
    A3 page in Portrait mode
  </div>
</div>
<div class="A3 A3landscape-parent">
  <div class="A3landscape">
    <div class="content">
      A3 page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
    </div>
  </div>
</div>
<div class="A3">
  <div class="content">
    A3 page in Portrait mode
  </div>
</div>

<div class="A4">
  <div class="content">
    A4 page in Portrait mode
  </div>
</div>
<div class="A4 A4landscape-parent">
  <div class="A4landscape">
    <div class="content">
      A4 page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
    </div>
  </div>
</div>
<div class="A4">
  <div class="content">
    A4 page in Portrait mode
  </div>
</div>

  </body>

</html>

我需要打印/pdf格式的A3。但在预览中它分为两页。有人可以告诉我，如何通过 css/html/js 打印/pdf 混合页面。

在打印的可能情况下，页面大多是 A4。但是如果我们需要通过css div进行混合布局打印。然后假设使用上述代码，它将 A3 页面分成两部分（检查 chrome display/preview ）。

如何以相同的布局格式正确打印，这在 css.xml 中有提到。任何想法。

谢谢。

标签： javascripthtmlcsspdfprinting

解决方案

推荐阅读