Question

我正在尝试将CSS用于打印页面。

我尝试了

等几种选项

<style type = "text/css">

   @media print
    {
        body {
            color : #eee !important;
            font-size : 2em;
        }
    }

</style>

这是我在JS中的html代码

newWin.document.write('<html><body onload="window.print()"><div style="border-bottom : 1px solid #000;margin-bottom :20px;"><div style="" ><p><lable>Name :</lable><span><b>'+name+'</b></span></p><p><lable>Mobile Number :</lable><span><b>'+mobile_number+'</b></span></p><p><lable>Age :</lable><span><b>'+age+'</b></span></p><p><lable>Gender :</lable><span><b>'+gender+'</b></span></p></div><div class="col-md-4"><p><lable>Prescribed By :</lable><span><b>'+doctor+'</b></span></p><p><lable>Prescribed Date :</lable><span><b>'+date+'</b></span></p></div></div><div class="col-md-12"><p><lable>Illness :</lable><span><b>'+illness+'</b></span></p><p><lable>Allergy :</lable><span><b>'+allergy+'</b></span></p><p><lable>Social History :</lable><span><b>'+social_history+'</b></span></p><p><lable>Old Medicine :</lable><span><b>'+old_medicine+'</b></span></p><p><lable>Old Diagnosis :</lable><span><b>'+old_diagnosis+'</b></span></p><p><lable>New Medicine :</lable><span><b>'+new_medicine+'</b></span></p><p><lable>New Diagnosis :</lable><span><b>'+new_diagnosis+'</b></span></p></div></body></html>');

但是没有用。有人帮忙吗？

Answer 1

将您的CSS添加到您的js中肯定会起作用。在这里https://jsfiddle.net/Udhaytitus/ou054d27/3/

function printData()
{
   /*newWin= window.open("");
   newWin.document.write('<html><style>@media print{body {color : #eee !important;font-size : 12em; padding:10px;}}</style><body onload="window.print()"><div>This is test print page.</div></body></html>');
   newWin.print();
   newWin.close();*/
window.document.write('<html><style>@media print{body {color : #eee !important;font-size : 12em;border:1px solid #000; padding:77px;}}</style><body onload="window.print()"><div>This is test print page.</div></body></html>');
   window.print();
   window.close();
  
}

$('#btnPrint').on('click',function(){
printData();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="print" id="btnPrint"/>

CSS不适用于打印

1 个答案: