如何打印特定的 div 区域？

Question

I am adding print function (as a button) to my project. Specifically when user pressed "print" button, then user can print specific div area (not only div content) of calendar.

I tried following code but it is not printing the whole div area and the second problem is I can not do anything on browser after running this code(the page is dead). It prints also only the div content by the way.

       on(dijit.byId("printCalendarButton"), "click", function(event) {
           var calendarContainer = dojo.byId("calendarContainer").innerHTML;   
           var originalContents = document.body.innerHTML;
           document.body.innerHTML = calendarContainer;
           window.print();
           document.body.innerHTML = originalContents;
       });

I also tried with css,but it prints also only a part of the page:

@media print {
  body * {
    visibility: hidden;
  }
  #calendarContainer * {
    visibility: visible;
  }
  #calendarContainer {
    position: absolute;
    left: 0;
    top: 0;
  }
}

Problem by printing:

Is there any good Ideas? Thanks!

Answer 1

Here's a basic printing arrangement you need for printing a single element with its content. Note specifically the CSS, when you're hiding all the elements inside the body with body * , this will also hide the elements to print.

To bring the printable elements to the print view, they all must be shown. This is made with #printable, #printable * {display: block;} rule. #printable * here is important, since the body * rule has hidden all the elements inside body by the type. Because types have a higher specifity , we can't override that with any other selector.

To make the body * to work as intended, ie to hide everything on the page, there must not be orphanned textnodes in body , everything must be enclosed in elements.

 const but = document.querySelector('#printButton'); but.addEventListener('click', e => { window.focus(); window.print(); });

 @media print { body * { display: none; } #printable, #printable * { display: block; } }

 <p>Some text visible on the screen only.</p> <div id="printable"> <p>This element is printed only (with its wrapper), but is visible also on the screen.</p> </div> <button id="printButton">Print</button> <p>More text visible on the screen only.</p>

If the content shows up on the paper only partially, you've to scale it to fit to the paper, or split it over multiple pages. It's also possible, that the existing rules are defining margins and other stuff. If that's the case, you've to override such rules in the printing rules too. Media queries don't exclude existing rules, they're still applied, if not overridden.

You can play with a demo at jsFiddle , it also shows how the orphanned textnodes are printed.