如何使用 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;
  }
}

嘗試使用這些寬度和高度值。