Print thorugh css/html/js in preivew/pdf mixed pages layout

Question

and below edited code

<!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>

I need A3 in print/pdf. But in preview it split in two pages. Can somebody tell me, how to print/pdf mixed pages through css/html/js.

In a likely scenario on print, pages mostly are A4. But if we need to print in a mixed layout through css div. then let suppose use above mentioned code, it will split the A3 pages into two ( check chrome display/preview ).

How to print correctly in the same layout format, which is mentioned in the css. any idea.

Thanks.

Print thorugh css/html/js in preivew/pdf mixed pages layout

0 Answers0