CODEWITHSUNDEEP
htmlcss
Arafat Rahman
Arafat Rahman

Reputation: 1015

CSS is not applied for print

I am trying to apply css for print page.

I have tried with several options like 

<style type = "text/css">

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

</style>

Here is my html code inside JS

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>');

But didn't worked. Anybody help please ?

Upvotes: 1

Views: 1456

Answers (1)

Udhay Titus
Udhay Titus

Reputation: 5869

add your css in your js surely it will works. check here 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"/>

Upvotes: 1

Related Questions