打印区域中的CSS

问题描述 投票:1回答:1
$("#btnPrint").on('click', function(){
    var toPrint = document.getElementById('printDiv');
    var popupWin = window.open('', '_blank', 'width=1250,height=850,location=no,left=200px,');
    popupWin.document.open();
    popupWin.document.write('<html><body onload="window.print()">')
    popupWin.document.write(toPrint.innerHTML);
    popupWin.document.write('</html>');
    popupWin.document.close()
});

这是我在HTML中打印特定部分的代码。单击按钮后,将弹出一个窗口,然后显示打印页面。我想改变printDiv内部标签的字体大小,但我无法改变它。我也尝试过:

@media print {
    label { font-size: 10px; }
}

但它对我不起作用。我该怎么做?

javascript jquery html css
1个回答
1
投票

因此,您正在启动一个新窗口,该窗口不带有您定义的CSS文件。相反,您可以定义可打印的div并使用window.print() javascript方法。

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}
label { font-size: 20px; }
@media print {
  label {
    font-size: 10px;
  }
}
<button type="button" onclick="printDiv('print-area')" class="btn btn-primary">Print Div</button>
<div id="print-area">
  <form class="form-group">
    <label for="test-label">Test</label>
    <input />
  </form>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.