Printing the contents of a div tag without a POP-Up window in Javascript

Question

I'm struggling to print the contents of a div tag without a pop up window

My code looks like this at the moment

var DocumentContainer = document.getElementById('print');

        var WindowObject = window.open('', 'Completed Registration Form', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');

        WindowObject.document.writeln(DocumentContainer.innerHTML);

        WindowObject.document.close();

        WindowObject.focus();

        WindowObject.print();

        WindowObject.close();

The below uses a popup window, is there a way to not do this using a popup window.

Why do you want to print out this code? I need to understand the usecase before I can help you with this. — Exelian, Feb 23 '11 at 10:11
possible duplicate of [how to print a div using a javascript](http://stackoverflow.com/questions/3210317/how-to-print-a-div-using-a-javascript) — Lightness Races in Orbit, Feb 23 '11 at 11:19

score 11 · Answer 1 · edited Sep 29 '17 at 19:54

There is a more efficient way - without jQuery or any other library

The idea is to replace the window with a hidden iframe, and print the contents of the iframe.

here is the code for that:

    function ClickHereToPrint(){
      try{
        var oIframe = document.getElementById('ifrmPrint');
        var oContent = document.getElementById('divToPrint').innerHTML;
        var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
        if (oDoc.document) oDoc = oDoc.document;
        oDoc.write('<head><title>title</title>');
        oDoc.write('</head><body onload="this.focus(); this.print();">');
        oDoc.write(oContent + '</body>');
        oDoc.close();
      } catch(e){
        self.print();
      }
    }

This considers that you have an iframe in your page. if you don't, just create one using: document.createElement('iframe')

Ashok Kumawat · Answer 2 · 2021-03-02T13:24:22.557

Try this function-

function PrintDiv(divid,title) {
    var contents = document.getElementById(divid).innerHTML;
    var frame1 = document.createElement('iframe');
    frame1.name = "frame1";
    frame1.style.position = "absolute";
    frame1.style.top = "-1000000px";
    document.body.appendChild(frame1);
    var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
    frameDoc.document.open();
     frameDoc.document.write(`<html><head><title>${title}</title>`);
    frameDoc.document.write('</head><body>');
    frameDoc.document.write(contents);
    frameDoc.document.write('</body></html>');
    frameDoc.document.close();
    setTimeout(function () {
        window.frames["frame1"].focus();
        window.frames["frame1"].print();
        document.body.removeChild(frame1);
    }, 500);
    return false;
}

Fiddle Link

https://jsfiddle.net/rtg37u94/

score 2 · Answer 3 · answered Feb 23 '11 at 10:11

2

http://www.bennadel.com/blog/1591-Ask-Ben-Print-Part-Of-A-Web-Page-With-jQuery.htm

Thats what you want

answered Feb 23 '11 at 10:11

benhowdle89

36,900
69
202
331

Jason · Answer 4 · 2013-03-13T11:50:24.110

1

all of the answers listed here use document.write which is bad practice, even to a temporary iframe.

try: https://github.com/jasonday/printThis

It lets you pull in the page styles, as well as allowing for an additional stylesheet all without document.write.

edited Mar 13 '13 at 11:50

answered Nov 12 '12 at 19:51

Jason

7,612
14
77
127

score 0 · Answer 5 · edited May 23 '17 at 12:26

0

this post has the answer

print div content from user control without opening a new window

You might be able to generate a CSS file that excludes everything except the , something in the lines of:

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

And the putting something like this in print.css:

* { display: none; }
#specialdiv { display: block; }

edited May 23 '17 at 12:26

Community

1
1

answered Sep 05 '13 at 06:23

Amila kumara

439
7
12

Lightness Races in Orbit · Answer 6 · 2011-02-23T10:21:27.530

0

What do you mean by "this"? What "this" is is code to open a window and write into it. If you want to do "this" by not using a popup window, then there's nothing left in the question.

Are you trying to write the contents of the <div> into the current document? Then simply do so!

var DocumentContainer = document.getElementById('print');
var WindowObject = window.open('', 'Completed Registration Form', <args>);
document.writeln(DocumentContainer.innerHTML);

Otherwise you need to be far more specific about what you wish to do.

Edit Oh, that kind of printing! Wow, people still do that?

$('#print').print();

in jQuery, using the technique that behowdle89 linked to.

Y'know, I imagine your users will wonder why they suddenly have a print dialog on their screen, and/or why their printer is suddenly whirring without notice. I suggest sending users to a PDF instead, which they can print on their own if they like, or save onto their hard disk if they have a bit more sense.

edited Feb 23 '11 at 10:21

answered Feb 23 '11 at 10:12

Lightness Races in Orbit

378,754
76
643
1,055

I totally agree with you. The client wants it to specifically work this way. I tried document.getElementById('print').print(); and get the following error Error: document.getElementById("print").print is not a function – Elitmiar Feb 23 '11 at 10:18
@Roland: You need to follow the link and read the page on the technique. It shows how you create that function. – Lightness Races in Orbit Feb 23 '11 at 10:20
1

And, for what it's worth... you should inform the client that professionals have said their customers/users will get _very_ irritated by it very quickly. – Lightness Races in Orbit Feb 23 '11 at 10:22

Printing the contents of a div tag without a POP-Up window in Javascript

6 Answers6

Fiddle Link

Linked