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

Ответ 1

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

в печати "распечатать эту страницу также напечатан.

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

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

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

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

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

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

Наконец, в вашем файле CSS добавьте следующее правило:

.noPrint {
    display: none;
}

Теперь ссылка "Распечатать эту страницу" не должна отображаться в печатной версии вашей страницы.

Стив

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

Удивительно, но никто еще не обратился к

Как я могу просмотреть предварительный просмотр моего счета, сгенерированного с веб-сайта

вопрос. Мне просто нужна была аналогичная функциональность и придумал решение в Как увидеть печатный носитель CSS в Firebug?

Ответ 6

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

Ответ 7

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

<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>

Хотя это не будет отображаться после отмены печати. ​​

Ответ 8

Вам следует скрыть элементы, которые вы не хотите отображать в печати, используя

display:none

Я написал учебник печать вашей веб-страницы. Надеюсь, это поможет.

Ответ 9

Это то, что я использовал:

printPage(evt: any) {
    // add this 'noprint' class to elements you want to hide from printing
    let hideElements = document.getElementsByClassName('noprint');  
    let arr = Array.prototype.slice.call(hideElements)
    arr.map(val => {
      val.style.visibility = 'hidden';
    })
    let w = window.open();
    // 'main' is the section I want to print
    w.document.write(document.getElementById('main').innerHTML);  
    w.print();
    w.close();
    arr.map(val => {
      val.style.visibility = 'visible';
    })
}

Ответ 10

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

в html body

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

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