Member Avatar for danale

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

  • 7 Contributors
  • 6 Replies
  • 10K Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by tnjnorbert
Member Avatar for parry_kulk

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 <div> 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);
Member Avatar for alec cartinian

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.

Member Avatar for utpal23

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

Utpal Bhowmick

Member Avatar for Airshow

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

Edited by Airshow because: n/a
Member Avatar for bharath.chinna

Thanks.....this article helps me a lot...

Member Avatar for tnjnorbert

how can l print acontent from the page

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.