Printing the contents of a div, keeping styling

Hello,

I have a complex form and a 'Print' button which should print only the contents of a specific DIV.
I am using the following function (i found on another forum):

function PrintContent() {
      var DocumentContainer = document.getElementById('divName');
    var WindowObject = window.open('', 'PrintWindow', '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();
}

While using this, the CSS styling of the DIV are missing.
How can I print the DIV's contents and keep the CSS styling.

Before using that function, I tried "execCommand("Print")" but the results weren't good at all. it printed only a small part of the content.

How can I achieve that?

Thanks,
Dana

danale

Newbie Poster

3 posts since Aug 2008

Reputation Points: 10

Solved Threads: 0

2 Years Ago

Instead of directly writing the DocumentContainer.innerHTML into the document of the new window, append the style sheet info to the text.

Suppose there is 'testStyle' in 'test.css' that is applied to the tag then try this

var strHtml = "<html>\n<head>\n <link rel=\"stylesheet\" type=\"text/css\"  href=\"test.css\">\n</head><body><div style=\"testStyle\">\n"
		+ DocumentContainer.innerHTML + "\n</div>\n</body>\n</html>";

WindowObject.document.writeln(strHtml);

parry_kulk

Junior Poster

Team Colleague

167 posts since Jan 2007

Reputation Points: 26

Solved Threads: 41

2 Years Ago

Yes I am using this method that you suggested to print the inner HTML content of a DOJO grid, with some formatting and trying to find out what the inner html cells or cell style, you can control it completely.
thanks for sharing.

if anyone is trying to print some DOJO dom or the DHTML generated from it and has more ideas please share it with us.. DOJO documentation is terrible, and there is currently no printing that I can find out from their generated widjits.

alec cartinian

Newbie Poster

1 post since Feb 2010

Reputation Points: 10

Solved Threads: 0

10 Months Ago

Really so much thanks. Otherwise I would spoil valuable time...................

Utpal Bhowmick

utpal23

Newbie Poster

6 posts since Jul 2011

Reputation Points: 10

Solved Threads: 0

10 Months Ago

Printing from a new window is a crazy way to achieve something that is catered for by CSS (from CSS2 if I recall correctly).

Simply specify an @media rule in your CSS style sheet:

<style>
/*
All common (screen) styles here, in the normal way.
*/
@media print {
  * { display: none; }/* Hide everything ... */
  #mydiv { display: block; }/* ... except the required div */
}
</style>

The 'display' style directive in the print block will override any 'display' directive(s) in the common block. All other directives in the common block that effect #mydiv will be honoured in the print. I think I'm right in saying that this includes any directives inherited by #mydiv from hidden parent elements (eg. body). This is certainly what I would expect, and most likely what you want. If not, then add further directives for #mydiv in the print block.

More information here .

If you need two or more Print buttons, each to print a particular div, then that's a different matter. You would need some javascript, but still not necessary to open a new window. See eg here .

Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

This article has been dead for over three months

You