@media打印无法正确打印

Question

我有一些大的Web表单，我正在尝试打印。它们在打印时被切断得很糟糕。

我在样式表中添加了@media打印。

对于大型表单，我分配了一个特定的class名称，以便我可以在我的 css 中识别它，主要是：

<div id="divFormMain" class="customPrint2" style="margin:5px;">

这就是我试图在 CSS 中做的事情：

.customPrint2 {
    -ms-transform: scale(.9); /* IE 9 */
    -webkit-transform: scale(.9); /* Safari 3-8 */
    transform: scale(.9);
}

不幸的是，转换不能完成这项工作，它仍然被切断。

最后我想补充

的是

@page size:landscape

但是，我不想为所有形式横向打印，而只想打印customPrint2

有没有办法做到这一点？

@page {
 margin:0cm 0cm 0cm 0cm !important;
}
@media print {
#divFrameContent  {
    height:100% !important;
    width:100% !important;
    border:none !important;
    table-layout:fixed !important;
}
.FormMenuNavigation {
    display:none !important;
    height:0px !important;
}
#tblBodyContent {
    /*table-layout:fixed !important;*/
}
#divFormContent {
    width:98%;
}
.customPrint {
    -ms-transform: scale(.9); /* IE 9 */
    -webkit-transform: scale(.9); /* Safari 3-8 */
    transform: scale(.9);
}
.customPrint2 {
    -ms-transform: scale(.9); /* IE 9 */
    -webkit-transform: scale(.9); /* Safari 3-8 */
    transform: scale(.9);
}
}

Answer 1

我认为您应该尝试以下代码...它对我来说很好用...可能你应该为要打印的页面设置一些尺寸......

@media print {
  @page {
    size: 330mm 427mm;
    margin: 14mm;
  }
  .container {
    width: 1170px;
  }
}

Answer 2

请尝试以下操作。它将适用于所有子元素。

.customPrint * {
        transform: scale(0.9);
    }