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>
Use the @media print mediaquery to format the printed view as well. Mediaquery on Mozilla
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