打印区域中的CSS

Mdb 发表于 Dev

MDB

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

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

汤姆·迪克森

因此，您正在启动一个新窗口，其中不包含您定义的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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。