Question

我有一些我正在尝试打印的大型网页表单。打印时，它们会被切断。

我在样式表中添加了@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

尝试以下方法。它将适用于所有子元素。

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

Answer 2

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

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

@media打印不能正确打印

2 个答案: