Print the content of the DIV using javascript

Question

I'm currently working on a task to print a content in a div. Currently I'm using this approach. This works okay if the div is smaller than the screen. My problem is, my div that I need to print (report) is twice or thrice the height of the normal screen.

When I hit control + P. I can only see is what only captured in the screen.

which browser you are using..? – Tintu C Raju Nov 04 '15 at 07:10 — Tintu C Raju, Nov 04 '15 at 07:10

score 2 · Answer 1 · answered Nov 04 '15 at 07:58

2

what about using a print query?

@media print {
  .selector{
    /*some css*/
  }
}

You can use this and re-arrange the content of your div in the print process

answered Nov 04 '15 at 07:58

Joseph Khella

695
1
9
26

I actually used that, the problem is I can only see on the print preview, what is on my screen. My div report has a height of 2-3 screens. – Chris Nov 04 '15 at 10:04
@Chris you will need to re arrange your components , either by splitting the sheet to 2 columns or change of the content sizes – Joseph Khella Nov 04 '15 at 10:16

score 1 · Accepted Answer · answered Nov 04 '15 at 07:00

Here is sample code sample and hope it will be help you. Feel free to comment if you need additional thing.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("#btnPrint").live("click", function () {
            var divContents = $("#dvContainer").html();
            var printWindow = window.open('', '', 'height=400,width=800');
            printWindow.document.write('<html><head><title>DIV Contents</title>');
            printWindow.document.write('</head><body >');
            printWindow.document.write(divContents);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.print();
        });
    </script>
</head>
<body>
    <form id="form1">
    <div id="dvContainer">
        This content needs to be printed.
    </div>
    <input type="button" value="Print Div Contents" id="btnPrint" />
    </form>
</body>
</html>

I've implemented what you suggested and also added the stylesheet as link. However the stylesheet is not rendering or taking effect on the print preview. — Chris, Nov 04 '15 at 07:27

Print the content of the DIV using javascript

2 Answers2