html - 样式在打印时弄乱了

Question

我正在使用一个应用程序同时打印纵向和横向模式的页面。一些页面以纵向打印，一些以横向打印。以纵向或横向打印页面看起来不错。但是以纵向和横向打印页面在一起使得具有 potrait 的页面变得拥挤。

这是我正在使用的媒体查询，

@media print {

    html {
        max-width: none;
        width:100%;
        float:left;
    }

    #nav-wrapper {
        display: none;
    }


    div.pageBreak {
        page-break-after: always !important;
    }


    @page{
        size: auto;
        margin: 0;
    }


    .landscape1 {
        transform-origin: top left;
        transform: translateY(1850px) rotate(-90deg);
        overflow-x: hidden;
        width: 1850px !important;
    }

    }

Answer 1

媒体查询提供与设备方向的匹配:

@media print and (orientation: landscape) {
    /* landscape styles */
}

@media print and (orientation: portrait) {
    /* portrait styles */
}

以这种方式工作。

或

也许你可以试试这个有人在网上试过的自定义 css。

这是适用于大多数浏览器(Chrome、Firefox、IE9+)的正确 CSS。

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

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

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

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

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

A4 页面的尺寸为 210mm x 297mm。您需要从尺寸中减去打印边距。并设置页面内容的大小:

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!另外横向页面的内容必须向下移动276mm!

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

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

一切顺利!