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

Question

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

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

我的网页如下所示:

打印时

这是我的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;
  }
}

尝试调整这些宽度和高度值。