How would a javascript look like, which is able to print a div with eternally styled CSS?-CodePudding

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 > 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>

CodePudding user response：

Use the @media print mediaquery to format the printed view as well. Mediaquery on Mozilla

CodePudding user response：

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