我有一个HTML报告,需要打印的景观,因为许多列。是否有一种方法可以做到这一点,而不需要用户更改文档设置?

浏览器中有哪些选项。


当前回答

仅仅旋转页面内容是不够的。下面是一个正确的CSS,它可以在大多数浏览器(Chrome, Firefox, IE9+)中工作。

首先将正文边距设置为0,否则页面边距将大于您在打印对话框中设置的页边距。同时设置背景颜色以使页面可视化。

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

页边距、边框和背景是可视化页面所必需的。

填充必须设置为所需的打印边距。在打印对话框中,必须设置相同的边距(本例中为10mm)。

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

A4页大小为210毫米x297毫米。你需要从尺寸中减去打印边距。并设置页面内容的大小:

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

我使用276mm而不是277mm,因为不同的浏览器对页面的缩放略有不同。所以有些媒体会在两页纸上打印277mm高的内容。第二页将为空。使用276mm更安全。

我们不需要打印页面上的任何边距、边框、填充、背景,所以删除它们:

@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;
  }
}

注意变换的原点是0 0!另外,横向页面的内容必须向下移动276毫米!

此外,如果你的页面混合了纵向和横向,IE会缩小页面。我们通过将-ms-zoom设置为1.665来修复它。如果你将它设置为1.6666或类似的值,页面内容的右侧边界有时可能会被裁剪。

如果你需要IE8或其他老浏览器的支持,你可以使用-webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)。但对于足够现代的浏览器来说,这并不是必需的。

这是一个测试页面:

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

其他回答

我面临的问题可能和你一样。这里的每个人都使用CSS来静态地提供它,但我不得不寻找一个动态的解决方案,这样它就会根据活动元素而改变,而无需重新加载页面。

我创建了两个文件,肖像。css和风景。css。

Portrait.css是空的,但是landscape.css只有一行。

@media print{@page {size: landscape}}

在我的主文件中,我添加了这一行html来指定portrait.css为默认值。

 <link rel="stylesheet" id="PRINTLAYOUT" href="portrait.css" type="text/css" /></link>

现在,要切换,你只需要改变元素中的href来切换打印模式。

$("#PRINTLAYOUT").attr("href","landscape.css")
  // OR 
document.getElementById("PRINTLAYOUT").href = "landscape.css" // I think...

这对我来说很有效,我希望它能帮助其他人像我一样做艰难的事情。注意,$表示JQuery..如果你还没有使用它,我强烈建议你现在就开始使用。

我尝试了Denis的答案,遇到了一些问题(在使用横向页面后,纵向页面无法正常打印),所以这里是我的解决方案:

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>

你也可以使用非标准的IE-only css属性写入模式

div.page    { 
   writing-mode: tb-rl;
}

仅仅旋转页面内容是不够的。下面是一个正确的CSS,它可以在大多数浏览器(Chrome, Firefox, IE9+)中工作。

首先将正文边距设置为0,否则页面边距将大于您在打印对话框中设置的页边距。同时设置背景颜色以使页面可视化。

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

页边距、边框和背景是可视化页面所必需的。

填充必须设置为所需的打印边距。在打印对话框中,必须设置相同的边距(本例中为10mm)。

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

A4页大小为210毫米x297毫米。你需要从尺寸中减去打印边距。并设置页面内容的大小:

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

我使用276mm而不是277mm,因为不同的浏览器对页面的缩放略有不同。所以有些媒体会在两页纸上打印277mm高的内容。第二页将为空。使用276mm更安全。

我们不需要打印页面上的任何边距、边框、填充、背景,所以删除它们:

@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;
  }
}

注意变换的原点是0 0!另外,横向页面的内容必须向下移动276毫米!

此外,如果你的页面混合了纵向和横向,IE会缩小页面。我们通过将-ms-zoom设置为1.665来修复它。如果你将它设置为1.6666或类似的值,页面内容的右侧边界有时可能会被裁剪。

如果你需要IE8或其他老浏览器的支持,你可以使用-webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)。但对于足够现代的浏览器来说,这并不是必需的。

这是一个测试页面:

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

你可以尝试以下方法:

@page {
    size: auto
}