Use the @media print mediaquery to format the printed view as well.
Mediaquery on Mozilla
Solution 1 :
Solution 2 :
Finally its Working – The JS has to be
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript">
function PrintDiv()
{
var windowContent = '<!DOCTYPE html>';
//Starting HTML Tags
windowContent += '<html>';
//Setting Print Page Title
windowContent += '<head>';
windowContent += '<title>Print Content</title>';
windowContent += '<link rel="stylesheet" type="text/css" href="styles.css" />';
windowContent += '</head>';
//Starting Body Tag
windowContent += '<body>'
//Getting Div HTML
windowContent += document.getElementById("main-container").innerHTML;
//Closing Body Tag and HTML Tag
windowContent += '</body>';
windowContent += '</html>';
//Calling Print Window
var printWin = window.open('','','fullscreen=yes');
//Opening Print Window
printWin.document.open();
//Adding Content in Print Window
printWin.document.write(windowContent);
//Closing Print Window
printWin.document.close();
//Focusing User to Print Window
printWin.focus();
//Calling Default Browser Printer
printWin.print();
//Closing Print Window
printWin.close();
}
</script>
</head>
i changed the Structure of the code in the head element
Problem :
The document root contains i two files, one is index.html, the second is named styles.css
the relevant code is the Javascript code, which i already posted here, it should format the html for printing the same way as it is shown in the browser, instead the output for the print dialog is not formatted at all…
How should i write a Javascript Code, which is able to print the Content of the <div class="main-container"> maintaining to keep the Style of it.
I just tried to write some javascript to do this, but the result is, that it prints everything nicely – while totally ignoring the css style i took so much time to develop -.-
Could you please help me?
th shortcut your work this is the Javascript code im using
<script type="text/javascript">
function PrintDiv()
{
var windowContent = '<!DOCTYPE html>';
//Starting HTML Tags
windowContent += '<html>';
//Setting Print Page Title
windowContent += '<head>';
windowContent += '<title>Print Content</title>';
windowContent += '<link rel="stylesheet" type="text/css" href="styles.css" />';
windowContent += '</head>';
//Starting Body Tag
windowContent += '<body>'
//Getting Div HTML
windowContent += document.getElementById("main-container").innerHTML;
//Closing Body Tag and HTML Tag
windowContent += '</body>';
windowContent += '</html>';
windowContent += 'divContents'
//Calling Print Window
var printWin = window.open('','','fullscreen=yes');
//Opening Print Window
printWin.document.open();
//Adding Content in Print Window
printWin.document.write(windowContent);
//Closing Print Window
printWin.document.close();
//Focusing User to Print Window
printWin.focus();
//Calling Default Browser Printer
printWin.print();
//Closing Print Window
printWin.close();
}
</script>
Comments
Comment posted by Barmar
Please post the relevant code here, not at an external link.
Comment posted by A Haworth
Is there a reason for putting the link to the CSS outside the head element?
Comment posted by L00tz1ffer
The CSS is in the head element… @AHaworth
Comment posted by A Haworth
I guess this isn’t the whole problem, but do you hve your browser set to print backgrounds?
Comment posted by L00tz1ffer
Since the browser gives a correct styling for print when i choose printing from the