After printing, remove the newly added and show the content of back. This solution is a hybrid of two categories: hide all content of, then copy the content of the printable element to a new and append it to. There is no one solution that will work well for all cases, so it is good to have all those choices and I'm adding another solution that works much better in some cases. The first will lose all styles, and the second is messy and can break events. Open a new window with the content of the printable element or replace the content with the content of the element. This works nicely for simple pages, but it is tricky for complex pages. Hide all elements in and only show the printable element. This requires building the whole website to be print-aware. See the demo, or read the related article for further details.Īll answers have trade-offs and cannot be used for all cases. Some benefits of this approach is that all styles are preserved, it does not open a new window, there is no need to move around a lot of DOM elements, and generally it is non-invasive with your original document. As a third act, it also attaches another class to preserved ancestor elements pe-preserve-ancestor.Ī dead-simple supplementary print-only css will hide and show respective elements. Then attaches another marker class ( pe-no-print) to all siblings of the current node, but only if there is no pe-preserve-print class on them. At each level, including the initial one (which is the to-be-printed node’s level), it attaches a marker class ( pe-preserve-print) to the current node. It works by iterating through selected node elements, and for each node, it traverses up the DOM tree until the BODY element. I wrote a tiny JavaScript module called PrintElements for dynamically printing parts of a webpage. I'm very late to this party, but I'd like to pitch in with yet another approach. Change the sheet references (0) to the appropriate sheet number if you need to make it later in the sheet sequence. NOTE: In my implementation, this must be the first style sheet. It also allows use of existing styles for elements that are printed - including the containing div.
PRINT 2 PAGES ON ONE PRINTME PLUS
Just issue printDiv("thedivid") from a button or whatever.Ī big plus for this approach it provides a general solution to printing selected content from within a page. Then, from anywhere in your document, you can print a div. The only other thing to do is to add one line to your onload processing so that the print style is initially disabled thereby allowing whole page printing. Now let's create a really simple javascript: function printDiv(divName) Then add an event like an onclick (as shown above), and pass the id of the div like I did above. Place your printable part inside a div with an id like this: I have a better solution with minimal code.
0 kommentar(er)
