Предварительный просмотр JavaScript

Отвечая на следующую часть вашего вопроса:

в печати "распечатайте и эту страницу напечатано.

Как я могу его скрыть?

Создайте новую таблицу стилей (в этом примере я назвал ее «print.css») и включите ее в свой HTML следующим образом:

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

Обратите внимание на media = "print" - это означает, что таблица стилей будет использоваться только при печати страницы.

Затем назначьте класс вашему элементу , чтобы мы могли ссылаться на него в CSS. :

<a href="javascript:window.print()" class="noPrint">Print this Page</a>

.noPrint {
    display: none;
}

Вы можете получить текущую страницу для печати, вызвав window.print (). Например:

   <a href="JavaScript:window.print();">Print this page</a>

Если вы хотите дать им некоторое представление о том, как это будет выглядеть напечатанным, вы можете использовать сценарий на этой странице , чтобы дать им псевдо-предварительный просмотр того, как страница с печать.

Вы можете создать отдельные таблицы стилей печати , чтобы иметь некоторый общий контроль над тем, как сайт будет выглядеть в печати. Вы можете отобразить сайт для своего пользователя с помощью этой специальной таблицы стилей печати перед печатью. Однако это не дает вам 100% предварительного просмотра, поскольку каждый браузер обрабатывает вещи немного по-своему. Вы не увидите, как он распечатывается, пока он не распечатает его на самом деле. Тем не менее, использование таблицы стилей печати поможет вам достаточно близко.

Некоторые операционные системы и драйверы принтеров предлагают пользователю предварительный просмотр между нажатием кнопки «Печать» и фактической печатью, но это не то, что вы можете контролировать или это гарантированно всегда будет доступно.

Чтобы скрыть ссылку при печати, сделайте следующее:

<style type="text/css" media="print">
.printlink
{
    display:none;
}
</style>
<a href="javascript:windows.print()" class="printlink">print this page</a>

Или:

<a href="javascript:windows.print()"
onclick="this.style.display='none';"
class="printlink">
print this page
</a>

Хотя это больше не появится после отмены печати. ​​

Браузеры не предлагают API для запуска функции предварительного просмотра печати в браузерах.

К счастью, почти все они хранят ее в обычном месте (в меню «Файл»), поэтому вы не должны привлекать к нему внимание пользователей.

Чтобы напрямую ответить на ваш вопрос, когда вы вызываете метод браузера print (), он печатает страницу как есть. Если вы хотите напечатать другую версию страницы (например, без элемента «Распечатать эту страницу»), вам потребуется создать отдельную версию страницы для печати (обычно это делается с использованием отдельной таблицы стилей), в которой нет таких элементы, которые вам не нужны на распечатанной странице.

function printReport( )
{     
    document.getElementById('ImagePrint').style.visibility='hidden';     
    window.print();
    document.getElementById('ImagePrint').style.visibility='visible';        
}

в HTML-тексте

<div>
    <a id="ImagePrint" onclick="return printReport();" style="vertical-align: top">print Info</a>
</div>

Эта функция не будет отображать изображение ur при печати. Вы можете использовать свой элемент управления, а не изображение с идентификатором элемента управления. надеюсь, ты получишь свое решение