Print window - lose control over the parent page

Question

So I am having a page where I have a button for printing and for doing this I am opening a new window, the problem is that if I don't close the print window I can't do anything in the parent page. Is there any way of not losing the control over it if I don't want to print the file in that moment.

This is the function for printing page:

function printTable() {
            var divToPrint = document.getElementById('grid-command-buttons');
            var title= document.getElementById('idTitle');
            var htmlToPrint = '' +
                '<style type="text/css">' +
                'table{' +
                'border-spacing:0; border-collapse: collapse;' +
                '}'+
                'table th, table td {' +
                'border:0.1em solid #000;' +
                'padding:0.5em;' +
                '}' +
                'table th>a{'+
                'text-decoration: none;'+
                'color: black;'+
                '}'+
                'table th>input{'+
                'display: none;'+
                '}'+
                'h1{'+
                'font-size: 1.1em;'+
                '}'+
                '</style>';

            htmlToPrint += title.outerHTML;
            htmlToPrint += divToPrint.outerHTML;
            newWin = window.open("");
            newWin.document.write(htmlToPrint);
            newWin.print();
            newWin.close();
        }

UPDATE:

The main reason I wanted to open a new window was because I didn't want to keep the current css design of the table. But I replaced the content of the body with the new table without design and used print function on the current page. And then after closing it I restored on the page the table with design.

function printTable(){

            var divToPrint = document.getElementById('grid-command-buttons');
            var title= document.getElementById('idTitle');
            var htmlToPrint = '' +
                '<style type="text/css">' +
                'table > tr > td:first-child{' +
                ' width: 2px; important;'+
                '}'+

                'table{' +
                'border-spacing:0; border-collapse: collapse;font-size: 9px;' +
                '}'+
                'table th, table td {' +
                'border:0.1em solid #000;font-size: 9px;' +
                'padding:0.5em;' +
                '}' +
                'table th>a{'+
                'text-decoration: none;'+
                'color: black;'+
                '}'+
                'table th>input{'+
                'display: none;'+
                '}'+
                'h1{'+
                'font-size: 1.1em;'+
                '}'+
                '</style>';

            htmlToPrint += title.outerHTML;
            htmlToPrint += '<table>';
            htmlToPrint += divToPrint.innerHTML;
            htmlToPrint += '</table>';

            var restorepage = $('body').html();


            $('body').empty().html(htmlToPrint);
            window.print();
            $('body').html(restorepage);
        }

`The main reason I wanted to open a new window was because I didn't want to keep the current css design of the table` You can combine [reset all styles](https://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only) and target style for [print only](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Examples) — Nick, Sep 17 '18 at 13:25

score 0 · Answer 1 · answered Sep 17 '18 at 08:49

0

Call your function like this and remove the newWin.close():

window.setTimeout(printTable, 0);

Edit: I assumed you want the window to stay open so it can be printed later.

answered Sep 17 '18 at 08:49

cuzi

978
10
21

Yes, but the problem is that if I don't close or cancel the printing page I can't press anything in my parent page. – Ioana B Sep 17 '18 at 09:32
You can force a new window instead of a new tab like this: `newWin = window.open("", "printwindow", "width=1000,height=700");` I tested in Chrome and Firefox, don't know about other browsers. – cuzi Sep 17 '18 at 11:12
The main reason I wanted to open a new window was because I didn't want to keep the current css design of the table. But I replaced the content of the body with the new table without design and used print function on the current page. And then after closing it I restored on the page the table with design. – Ioana B Sep 17 '18 at 13:07

Print window - lose control over the parent page

1 Answers1