Div Print с использованием ненавязчивого JavaScript

Question

У меня есть ссылка «Печать», где я хочу напечатать раздел для просмотра на странице для печати. Я не хочу печатать меню, а просто определенный идентификатор с использованием ненавязчивого JavaScript. Как это сделать?

Ссылка для печати:

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

Просмотр страницы, которую я хочу напечатать:

            <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

Используйте css, чтобы скрыть все элементы, которые вы не хотите печатать с помощью @media print и visibility: hidden;, и для безопасной меры вы можете указать, что вы хотите печатать с помощью visibility: visible;.

В пределах @media print вы также можете указать стиль только для печати. Если у вас белый текст на темном фоне, вы можете добавить p { color: #000000; }, чтобы сделать его более удобным для печати. ​​

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