Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript CSS
Hi
Expert,
 
I have one problem during printing a web page. I am using following function to print document
 
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 | [Rose]
Imdadhusen
Posted 17-Nov-10 20:58pm
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Use Inline CSS in javascript.
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.
  Permalink  
Comments
Sunasara Imdadhusen at 18-Nov-10 8:43am
   
let me check it!
Sunasara Imdadhusen at 18-Nov-10 9:03am
   
No. this is not working.. it will display in preview with as i want but in printing the will not as per my requirement.
Sunasara Imdadhusen at 18-Nov-10 9:04am
   
Pleas help me! if you can
Sunasara Imdadhusen at 18-Nov-10 9:04am
   
I always appreciate your efforts. my VOTE is 5
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

In your CSS file
you can define your print related styles as below.
 
@Media Print 
{
//your print related styles goes here
}
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

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>
<link rel="stylesheet" media="screen" type="text/css" href="screen.css" />
<link rel="stylesheet" media="print" type="text/css" href="print.css" />

 
</head>
<html>
<!-- your html code goes here... -->
</html>

  Permalink  
v3

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

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 535
1 OriginalGriff 275
2 BillWoodruff 260
3 Shweta N Mishra 244
4 Deepu S Nair 230
0 OriginalGriff 6,168
1 Sergey Alexandrovich Kryukov 5,818
2 DamithSL 4,958
3 Manas Bhardwaj 4,539
4 Maciej Los 3,755


Advertise | Privacy | Mobile
Web04 | 2.8.1411019.1 | Last Updated 6 Jan 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100