Print web page with CSS support using Javascript

Question

4.33/5 (3 votes)

See more:

Hi Expert,

I have one problem during printing a web page. I am using following function to print document

C#

function printCrossword(printContainer) {
    var DocumentContainer = getElement(printContainer);
    var WindowObject = window.open('', "PrintWindow", "width=5,height=5,top=200,left=200,toolbars=no,scrollbars=no,status=no,resizable=no");
    WindowObject.document.writeln(DocumentContainer.innerHTML);
    WindowObject.document.close();
    WindowObject.focus();
    WindowObject.print();
    WindowObject.close();
}

Problem: In the printing page i have assign class to each elements and it's looking good during preview, but print mode it will skipping some borders, background color and fonts.

Please do let me know, how i can print a document with same looking in preview mode.

Your answer will be appreciated!:rose:
Imdadhusen

Posted 17-Nov-10 19:58pm

Sunasara Imdadhusen

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

thatraja · Answer 1 · 2010-11-17T20:26:00

Use Inline CSS in javascript.

XML

function PrintPage()
{
   var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=900,height=300,left=100,top=25";
   var sWinHTML = document.getElementById('divPrint').innerHTML;
   var winprint=window.open("","",sOption);
       winprint.document.open();
       winprint.document.write('<html><head><style type="text/css">');
       winprint.document.write('body,td,th{font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#000000}');
       winprint.document.write('.style1 {font-size:11px; font-weight:bold; color:#000000; }');
       winprint.document.write('.style2 {font-size:11px; font-weight:bold; color:#FFFFFF; }');
       winprint.document.write('</style></head><body onload="window.print();">');
       winprint.document.write(sWinHTML);
       winprint.document.write('</body></html>');
       winprint.document.close();
       winprint.focus();
}

Here divPrint using the inline css which was written in inside script. It's working one.

Tharaka MTR · Answer 2 · 2013-01-04T00:08:00

Solution 2

In your CSS file
you can define your print related styles as below.

CSS

@Media Print 
{
//your print related styles goes here
}

Posted 4-Jan-13 0:08am

Tharaka MTR

shahin_rezaei · Answer 3 · 2013-01-06T17:27:00

In this (X)HTML document I've linked to the screen.css style sheet for the styles that will be used when displaying the page onscreen and the print.css style sheet for the styles that should be used when printing.
---------------------------------------------------------------

<pre lang="HTML"></pre><head><br />
     <link rel="stylesheet" media="screen" type="text/css" href="screen.css" /><br />
     <link rel="stylesheet" media="print" type="text/css" href="print.css" /><br />
<br />
</head><br />
<html><br />
       <!--  your html code goes here... --><br />
</html><br />

Print web page with CSS support using Javascript

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0