Div Print using unobtrusive javascript

Question

I have a Print link where I want to print a printer friendly section of a View page. I don't want to print the menus but just a certain div id using unobtrusive javascript. How do I do that?

Printer-Friendly link:

                  <a class="list-group-item"
                   asp-area="Admin"
                   asp-controller="Employee"
                   asp-action="View"
                   asp-route-id="@currentId"   title="Print">Printer-Friendly Version</a>

View page that I want to print:

            <div id="divPrint" class="col-md-8">
                 <h2>Administration</h2>
                 <h4>View the Document</h4>
                   <div class="card">
                   <div class="card-body">
                   <div class="col-md-12">
                    <span><b>@Model.Current.Title</b> as of <b>@Model.Current.AsOf.ToString("dddd, 
                    dd MMMM yyyy")</b></span>
                   </div>
                 </div>
                </div> 
             </div>

Answer 1

Use css to hide all the elements that you don't wan't to print with @media print and visibility: hidden; and for safe measure you can specify what you do want to print with visibility: visible;.

Within @media print, you can also specify styling only for printing. If you have white text on dark background, you can add p { color: #000000; } so it is more printer friendly.

@media print {
  .classes-to-not-print, div, nav {
    visibility: hidden;
  }
  .classes-to-print, #divPrint {
    visibility: visible;
  }
}