Print part of a page javascript

Question

I have a problem. I'm trying to print out only content which is in a div, basically everything below the buttons (See picture below). Div content

But then i try to print, the result looks something like this: preing preview

I.e. without any stylesheets.

But the code includes all the css files I currently have.

This is the function I have. I have tried with or without the stylesheets and different ways to reference them. Can anybody see what I'm doing wrong?

function PrintHistory() {
        var printDivCSS5 = new String(
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '');

        var oldPage = document.body.innerHTML;
        var prtContent = document.getElementById("historyTabeTarget");
        var WinPrint = window.open('', '', 'letf=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status=0');
        WinPrint.document.write("" + printDivCSS5 + prtContent.innerHTML + "");
        WinPrint.document.close();
        WinPrint.focus();
        WinPrint.print();
        WinPrint.close();
        prtContent.innerHTML = oldPage;
    };

StrongBite · Accepted Answer

I believe it can be achieved by CSS. All you need to do is add the following with the CSS specifications for print in your stylesheet.

@media print{
    /* your print css */
}

Use display: none; for all the elements you do not wish to be printed and override the remaining css accordingly.

Print part of a page javascript

Answers (1)

Related Questions