Aligment issue in window.print using Javascript

Question

I am using java-script window.print for my print div. When I print that div than I alignment issue in my print page.

Below my code which is I have used for print and also I have upload both image. First is my output image and second is which I was print that layout.

  function PrintPopup() {
        var data = $("#viewCoupon").html();
        var mywindow = window.open('', 'Print Data', 'height=540,width=980');
        mywindow.document.write("<html><head><title>Bonus Box Offer</title>");
        mywindow.document.write("<link href=\"Content/style.css\" rel=\"stylesheet\" />");
        mywindow.document.write("<style>.userwinners{margin-top: 51px;margin-left: 0;} .no-Print{display:none;}  @media print {.no-Print{display:none;} title {display:none;} }</style>");
        mywindow.document.write("</head><body >");
        mywindow.document.write(data);
        mywindow.document.write("</body></html>");

        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10

        mywindow.print();
        //mywindow.close();

        return true;
    }

Please read [this](http://stackoverflow.com/questions/1542320/margin-while-printing-html-page) and format your page with appropriate margins. — sabithpocker, Oct 13 '15 at 06:17
can you please create a jsfiddle .. for better understanding .. the issue needs to be fixed in you `html` and `css` — Kishore Sahasranaman, Oct 13 '15 at 06:46

score 0 · Answer 1 · answered Oct 15 '15 at 07:21

Use separate CSS file. So, you can align the page using CSS in a better way as you are expecting. Here is the code for CSS file include and this only effect for PRINT.

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

So you can add whatever CSS you want to align your print page.

Aligment issue in window.print using Javascript

1 Answers1