如何使用 javascript/jquery 在打印页面上设置 div 内容的样式？

Question

我需要打印 web 页面的内容。 div下面有一个打印按钮

<div class="printing-content">
</div>
<button class="btn -primary mr-1" onclick="window.print()"><span class="mdi mdi-printer"></span> Print</button>

我的 web 页面如下所示：

印刷时

这是我的 css

 @media print {
        body * {
            visibility: hidden;
        }

    .printing-content * {
        visibility: visible;
        -webkit-print-color-adjust: exact;
    }
    .printing-content {
        /* position: absolute; */
        width: 100%;
        left: 0;
        top: 0;
    }
}

我需要在打印页面上显示全宽的 div。 提前致谢。

Answer 1

您可以尝试使用媒体查询并将页面大小设置为横向？

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

对于 div 本身，您也可以使用媒体查询在打印 div 时使用它的宽度和高度。

@media print { 
  .printing-content {
     width: 210mm;
     height: 297mm;
  }
}

尝试使用这些宽度和高度值。