发表新帖
发表新帖

Landscape printing from HTML

前端 未结
关注
16 1815
被撕碎了的回忆
被撕碎了的回忆 2020-11-22 06:31

I have a HTML report, which needs to be printed landscape because of the many columns. It there a way to do this, without the user having to change the document settings?

相关标签:
16条回答
  • 离开以前
    2020-11-22 07:14

    It's not enough just to rotate the page content. Here is a right CSS which work in the most browsers (Chrome, Firefox, IE9+).

    First set body margin to 0, because otherwise page margins will be larger than those you set in the print dialog. Also set background color to visualize pages.

    body {
  margin: 0;
  background: #CCCCCC;
}

    margin, border and background are required to visualize pages.

    padding must be set to the required print margin. In the print dialog you must set the same margins (10mm in this example).

    div.portrait, div.landscape {
  margin: 10px auto;
  padding: 10mm;
  border: solid 1px black;
  overflow: hidden;
  page-break-after: always;
  background: white;
}

    The size of A4 page is 210mm x 297mm. You need to subtract print margins from the size. And set the size of page's content:

    div.portrait {
  width: 190mm;
  height: 276mm;
}
div.landscape {
  width: 276mm;
  height: 190mm;
}

    I use 276mm instead of 277mm, because different browsers scale pages a little bit differently. So some of them will print 277mm-height content on two pages. The second page will be empty. It's more safe to use 276mm.

    We don't need any margin, border, padding, background on the printed page, so remove them:

    @media print {
  body {
    background: none;
    -ms-zoom: 1.665;
  }
  div.portrait, div.landscape {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
  div.landscape {
    transform: rotate(270deg) translate(-276mm, 0);
    transform-origin: 0 0;
  }
}

    Note that the origin of transformation is 0 0! Also the content of landscape pages must be moved 276mm down!

    Also if you have a mix of portrait and lanscape pages IE will zoom out the pages. We fix it by setting -ms-zoom to 1.665. If you'll set it to 1.6666 or something like this the right border of the page content may be cropped sometimes.

    If you need IE8- or other old browsers support you can use -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). But for modern enough browsers it's not required.

    Here is a test page:

    <!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      ...Copy all styles here...
    </style>
  </head>
  <body>
    <div class="portrait">A portrait page</div>
    <div class="landscape">A landscape page</div>
  </body>
</html>
    0 讨论(0)
  • 天涯浪人
    2020-11-22 07:16

    You might be able to use the CSS 2 @page rule which allows you to set the 'size' property to landscape.

    0 讨论(0)
  • 长情又很酷
    2020-11-22 07:16

    I tried Denis's answer and hit some problems (portrait pages didn't print properly after going after landscape pages), so here is my solution:

    body {
  margin: 0;
  background: #CCCCCC;
}

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

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

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

div.content {
  padding: 10mm;
}

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

@media print {
  body {
    background: none;
  }
  div.page {
    width: 209mm;
    height: 296mm;
  }
  div.landscape {
    transform: rotate(270deg) translate(-296mm, 0);
    transform-origin: 0 0;
  }
  div.portrait,
  div.landscape,
  div.page {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
}
    <div class="page">
  <div class="content">
    First page in Portrait mode
  </div>
</div>
<div class="page landscape-parent">
  <div class="landscape">
    <div class="content">
      Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
    </div>
  </div>
</div>
<div class="page">
  <div class="content">
    Third page in Portrait mode
  </div>
</div>

    0 讨论(0)
  • 陌清茗
    2020-11-22 07:20 
    -webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

    not working in Firefox 16.0.2 but it is working in Chrome

    0 讨论(0)
 看不清?
提交回复
热议问题