Restricting certain elements from being printed

Question

I am trying to only print certain elements with JavaScript. For example, when a link is clicked it will open the print dialog window. However, I wish to have some elements of the table not printed and for the headers to be on one line instead of breaking into multiple lines.

I want to get rid of the Edit and Delete table cells and put all the table headers on one line. Here is my current JavaScript code I have in place:

$('#print').on('click', function() {
    var content = document.getElementById("sample_editable_2");
    var holderWindow = window.open("");

    holderWindow.document.write(content.outerHTML);
    holderWindow.print();
    holderWindow.close();
});

Sorry if this is unclear, I've never attempted this before.

Appreciate any help that can be given.

Edit:

Here is my css file

 @media print {
    .h_edit {
        display: none;
    }

    .h_delete {
        display: none;
    }

    .b_edit {
        display: none;
    }

    .b_delete {
        display: none;
    }

    .order-issue {
        white-space: nowrap;
    }

    .sub-shipping-issue {
        white-space: nowrap;
    }

    .sub-refunds-returns-issue {
        white-space: nowrap;
    }

    .sub-update-issues {
        white-space: nowrap;
    }

    .sub-campaign-issues {
        white-space: nowrap;
    }

    .sub-campaign-change-issues {
        white-space: nowrap;
    }

    .sub-campaign-design-issues {
        white-space: nowrap;
    }

    .sub-teeforall-works {
        white-space: nowrap;
    }

    .order-id {
        white-space: nowrap;
    }

    .site-url {
        white-space: nowrap;
    }
}

and I am calling the css file like so: <link rel="stylesheet" media="print" type="text/css" href="/css/print.css">

but it is still not hiding the elements and making them not wrap.

http://stackoverflow.com/questions/2914190/how-does-this-print-stylesheet-work is the way probably — Gavriel, Feb 07 '16 at 21:51

score 2 · Answer 1 · answered Feb 07 '16 at 21:53

2

I don't understand how this is related to javascript. For you to control how pages are printed, you need to write a css file for print only. Something like

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Then in print.css you should do

.print-hide {
   display: none; // or whatever you want
}

Any item with .print-hide will be treated with above CSS.

answered Feb 07 '16 at 21:53

Amir Raminfar

33,777
7
93
123

How would I exclude certain table td cells though, that is what I am trying to do. Here is my css file: @media print { #sample_editable_2 { display: none; } } – user2101411 Feb 07 '16 at 21:58
@user2101411 - To hide the edit and delete columns see: [show/hide html table columns using css](http://stackoverflow.com/questions/2858339/show-hide-html-table-columns-using-css). Simply adapt that answer to the print media. – Yogi Feb 07 '16 at 22:14
I only want to hide it on the print dialog. I don't understand how that link relates to my question. – user2101411 Feb 07 '16 at 22:41

score 1 · Answer 2 · edited May 23 '17 at 12:30

1

To complete Amir Raminfar's answer, for your second request

and for the headers to be on one line instead of breaking into multiple lines

you can add to the same "print-only" CSS a directive to get some items to not go next line. Be aware that this could wreck the page layout, when the whole table has to be redesigned.

.print-one-line {
    white-space: nowrap;
}

So:

<td class="print-hide">This won't appear</td>
<td class="print-one-line">This will not go on the next line</td>

To verify it is working, you can check the CSS console and use Media Type Emulation if available in the browser.

edited May 23 '17 at 12:30

Community

1
1

answered Feb 07 '16 at 21:58

LSerni

55,617
10
65
107

Would using @media print { } be required? – user2101411 Feb 07 '16 at 22:06
Absolutely. You want those lines to kick in only when you're *printing*, not when the media type is *screen*. Or you do as Amir suggested and prepare two CSS, one loaded with media="print". – LSerni Feb 07 '16 at 22:07
I used white-space: nowrap; but it is still showing on two lines? – user2101411 Feb 07 '16 at 22:11
@user2101411 - Inspect which css attributes are actually being applied to the element using the browser developer tools (F12). Ensure that nowrap is being applied as you expect. – Yogi Feb 07 '16 at 22:23
I referenced them all via classes. Why would it not be applied? (see my css code if that helps) – user2101411 Feb 07 '16 at 22:28
Added to answer. Don't know why it wouldn't be applied, but apparently it is not. What you're doing is correct. There must be something else preventing the CSS from being loaded and/or applied. Possibly caching? – LSerni Feb 07 '16 at 22:45
cleared my cache but it still is showing the same way. I don't know why.. :\ – user2101411 Feb 07 '16 at 22:53

Restricting certain elements from being printed

2 Answers2