我正在使用一个应用程序以potrait和landscape模式一起打印页面。一些页面正在potrait中打印,一些页面是在potrait中打印。以potrait或landscape打印页面看起来都不错,但是以potrait和landscape一起打印页面会使带有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;
    }

    }

最佳答案

媒体查询可根据设备的方向进行匹配:

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


要使页面可视化,必须使用页边距,边框和背景。

填充必须设置为所需的打印边距。在打印对话框中,您必须设置相同的边距(在本示例中为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,因为不同的浏览器对页面的缩放略有不同。因此,其中一些将在两页上打印277毫米高的内容。第二页将为空。使用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)。但是对于足够现代的浏览器来说,则不是必需的。

你已准备好出发!!

关于html - 样式在打印中变得困惑,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55179318/

10-12 12:55
查看更多