How Can Print Preview Be Called from JavaScript

How can Print Preview be called from Javascript?

You can't, Print Preview is a feature of a browser, and therefore should be protected from being called by JavaScript as it would be a security risk.

That's why your example uses Active X, which bypasses the JavaScript security issues.

So instead use the print stylesheet that you already should have and show it for media=screen,print instead of media=print.

Read Alist Apart: Going to Print for a good article on the subject of print stylesheets.

How to trigger javascript function when select print preview

To detect print requests with javascript you can try:

var beforePrintFunc = function() {
    ...
}
//for chrome
window.matchMedia('print').addListener(function(mql) {
    if (mql.matches) {
        beforePrintFunc();
    }
});

window.onbeforeprint = beforePrintFunc;

To detect after print preview event:

var afterPrintFunc = function() {
    ...
}
//for chrome
window.matchMedia('print').addListener(function(mql) {
    if (!mql.matches) {
        afterPrintFunc();
    }
});
window.onafterprint = afterPrintFunc;

However, there may be an easier approach as pointed out by @torazaburo in the comment below as long as you are only making styling changes:

@media print {
    //your print specific styles go here
}

Add javascript inside print preview page using window.open() method

You can add a script to data variable like so:

var data = '<script>/* CODE */ <\/script>' +
    '<table ...>' +
           :
    '<style...>';

The ending script tag within a string must somehow be broken, so that it doesn't appear as a literal </script>. If it does, the script will break, when the tag is found.

Also you need to take care, that quotes within a script string are not breaking the string. Use "s and escape ' with a backslash when needed.

Actually there are more elegant ways to style a page (or part of it) for printing, you could use for example Media Queries, or link (see media) a separate stylesheet to style prints.

How can i create my own print preview option for all browser

You can have a new pop-up window which looks like a preview of the page you want to print and provide few functionality through java-script as in Chrome.This will work fine in non chrome browsers.

But you cannot hide chrome's print preview functionality via java-script.

So whatever new print preview page you create will look good in most of the browsers, but your custom print preview page will again go through print preview of chrome before printing.

For ex, Suppose you want to print in order confirmation page of an e-commmerce website by showing your custom print preview.
To achieve this you can have a dummy print button on the confirmation page on click of which your pop up opens with the formatted print content with extra functionality as provided by chrome. You can have your print button (window.print())in your custom print preview to print the final page.

But this works fine in non chrome browsers, but will go through chrome's preview functionality again.

Image not showing in javascript print preview

You are calling print before the image has loaded. You can make the function async and add await new Promise(r => setTimeout(r, 2000)) before your print and it works. I do not know the best way for you to decide to check for the image to have loaded. You could use a while loop and check every 200 ms or so for the image to load.

Here is an example of me testing with a random image from google.

<html>
<head>
    <title>Online Test</title>
</head>
<body>
    <div style="padding: 10px 0;">
        <h1>Online Test</h1>
    </div>
    <!--Data entry section.-->
    <div id="container_data_entry">
         <h2 id="subject"><b>Subject - Computer Science</b></h2> <br />

        <div id="container" style="width:100%;overflow:auto;">
            <ul>
                <li><b>Q No. 1:</b>Question one?</li>
                <li><textarea id="a1"></textarea></li>
            </ul>
            <ul>
                <li><b>Q No. 2:</b>Question two?</li>
                <li><textarea id="a2"></textarea></li>
            </ul>
            <ul>
                <li><b>Q No. 3:</b> Question three?</li>
                <li><textarea id="a3"></textarea></li>
            </ul>
        </div>
        <div style="text-align:center;">
            <input type="button" style="" value="Print to PDF" id="btPrint" onclick="onlineTestApp.printPage();" />
        </div>
    </div>
</body>
<script>
    let onlineTestApp = new function () {
        //ADDED ASYNC ⬇
        this.printPage = async function () {
            let style = "<style>";
            style = style + "h1, h2 {text-align:center; font:22px Times New Roman; font-weight:bold;}";
            style = style + ".answers {font:18px Calibri; padding:10px 0;}";
            style = style + "</style>";
            //ADDED TEST LOGO ⬇
            let testLogo = "https://logodix.com/logo/1961524.png";
            let header ='<img src="'+testLogo+'" width="100px" height="100px"/>' +
            '<h1>School Name</h1>' + '<h2>Online Test</h2>';
            let theBody = '';
            // get all textarea (anwsers).
            let ele_tArea = document.getElementsByTagName('textarea');
            for (let i = 0; i <= ele_tArea.length - 1; i++) {
                if (theBody === '') {
                    if (ele_tArea[i].value != '') {
                        theBody = '<p class="answers"> <b>Answer ' + (i + 1) + '</b> - ' + ele_tArea[i].value + '</p>';
                    }
                }
                else {
                    if (ele_tArea[i].value != '') {
                        theBody = theBody + '<p class="answers"> <b>Answer ' + (i + 1) + '</b> - ' + ele_tArea[i].value + '</p>';
                    }
                }
            }
            theBody = header + theBody;
            // Create window object and print the data.
            let  newWin = window.open('', '', '');

            newWin.document.write(style);
            newWin.document.write(theBody);
            //ADDED await setTimeout ⬇
            await new Promise(r => setTimeout(r, 2000));
            newWin.print();
            newWin.close();
        }
    }
</script>
</html>

How Can Print Preview Be Called from JavaScript