CODEWITHSUNDEEP
javascripthtmlcssprinting
user3400389
user3400389

Reputation: 367

Printing Page adjustment

I have a page like below in Picture 1 but when i click to print that page its not showing properly on the print page.

<code>layout</code>

js:

$("#printBtn").click(function(){
    printcontent($("#YearWise").html());
});

function printcontent(content)
{
    var mywindow = window.open('', '', '');
    mywindow.document.write('<html><title>Print</title><body>');
    mywindow.document.write(content);
    mywindow.document.write('</body></html>');
    mywindow.document.close();
    mywindow.print();
    return true;
}

html:

<button id="printBtn">Click Print</button>

<div id="YearWise" style="display: none">
       <p style="position: absolute; color: rgb(172, 166, 166); font-family: calibri; font-size: 25px; font-variant: small-caps; font-weight: 100; margin-left: 514px; padding-top: 75px;">Report</p>
       <span style="position: absolute; color: rgb(138, 138, 138); font-family: calibri; font-size: 31px; font-variant: small-caps; margin-left: 466px; padding-top: 42px;">Year Wise</span>

     <div id="main" style="display: block; background-color: rgb(228, 228, 228)" 
     <input id="ChangeYear" class="date-pickerY" style="text-transform:uppercase; font-family: calibri; font-size: 18px; margin-top: -135px; margin-left: 416px; width: 160px; height: 24px; border: 1px solid #717271; color: rgb(68, 68, 68); padding-left: 6px" />
  <img style="margin-left: -32px; margin-top: -134px; cursor: pointer; height: 28px;" src="../../img/Date.png" onClick="OpenDatePicker('ChangeYear')"/>

<ul id="holder" style="height: 785px; width: 1059px; margin-left: -25px; margin-top: -32px; margin-right: -26px; border-radius: 0px;">
<li style="width: 1021px; height: 981px; background-color: whitesmoke; border-radius: 0px; margin-top: 5px; margin-left: 0px; margin-right: 0px; padding-bottom: 94px;">

 <br>

<div id="YearTable">
     <div class="block">
</div>
</div>

</li>
</ul>
</div>
</div>

I provide a jsfiddle for the demo. If you people can help that would be really appreciated.

Jsfiddle

issue now:

<code>sample picture</code>

Upvotes: 0

Views: 235

Answers (1)

4dgaurav
4dgaurav

Reputation: 11496

I suppose your css styles are not included in content, create a css file, write all your inline styles in it and include it as document.write("<link rel="stylesheet" href="" />");

This line has a syntax error:

mywindow.document.write("<link rel="stylesheet" type="text/css" href="yourpath\style.css" />");

change it to this:

mywindow.document.write('<link rel="stylesheet" type="text/css" href="yourpath\style.css" />');

or do the proper escaping

mywindow.document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"yourpath\style.css\" />");

OR

simply include a style sheet containing all your inline styles for print content and include it as

<link rel="stylesheet" type="text/css" href="style.css" media="print">

If I explain in simple words

<link rel="stylesheet" type="text/css" href="main.css"> // this css will be used on page
<link rel="stylesheet" type="text/css" href="style.css" media="print"> // this css will be used if you try to print your page

Upvotes: 1

Related Questions