打印区域中的CSS

时间:2019-03-06 01:49:48

标签: javascript jquery html css

$("#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; }
}

但这对我没有用。我该怎么做?

1 个答案:

答案 0 :(得分: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>