Печать html страницы: Печать HTML страниц

Leave a Comment / Html / By /

Содержание

JavaScript — Печать страницы

JavaScript — Печать страницы
  • Офис
  • Веб
  • Программер
  • Полезные книги
  • Полезные советы
  • Видео уроки
  • Блог
  • Карта сайта
  • Вы здесь:  
  • Главная
  • Программер
  • JavaScript
  • JavaScript — Печать страницы
Категория: JavaScript
Просмотров: 7582
  • javascript

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

JavaScript помогает реализовать эту функцию с помощью функции печати объекта окна.

Функция печати JavaScript window.print() печатает текущую веб-страницу при ее выполнении. Вы можете вызвать эту функцию напрямую, используя событие onclick, как показано в следующем примере.

пример

Попробуйте следующий пример.


<html>
   <head>
     
      <script type="text/javascript">
         <!--
         //-->
      </script>
  
   </head>
  
   <body>
     
      <form>
         <input type="button" value="Print" />
      </form>
  
   </body>
<html>

Хотя он служит для получения распечатки, это не рекомендуется. Страница, удобная для печати, — это просто страница с текстом, изображениями, графикой или рекламой. Вы можете сделать принтер для печати следующим образом:

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

Если вы не найдете вышеуказанные объекты на веб-странице, вы можете использовать стандартную панель инструментов браузера, чтобы распечатать веб-страницу. Следуйте по ссылке следующим образом. Файл → Печать → Нажмите кнопку «ОК».


Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Печать | OKI

  • Для драйвера принтера PCL для ОС Windows

  • Для драйвера принтера PS для ОС Windows

  • Для Mac OS X

Несколько страниц документа можно напечатать на одном листе бумаги.

Примечание

Для драйвера принтера PCL для ОС Windows

  1. Откройте файл для печати.

  2. В меню [Файл] выберите [Печать].

  3. Нажмите [Настройки].

  4. На вкладке [Настройка] в разделе [Режим вывода] выберите количество страниц, которые необходимо напечатать на одном листе.

  5. Щелкните [Параметры].

  6. Установите все параметры в разделах [Page Borders (Границы страниц)], [Page layout (Макет страницы)] и [Bind Margin (Поле переплета)], затем щелкните [OK (ОК)].

  7. При необходимости измените другие параметры, а затем нажмите [ОК].

  8. На экране [Печать] нажмите [Печать].

Для драйвера принтера PS для ОС Windows

  1. Откройте файл для печати.

  2. В меню [Файл] выберите [Печать].

  3. Нажмите [Настройки].

  4. На вкладке [Макет] выберите [Страниц на листе].

  5. Выберите количество страниц, которые необходимо напечатать на одном листе, в раскрывающемся списке.

  6. Установите флажок [Border (Граница)], чтобы отменить границу.

  7. Щелкните [Advanced (Расширенные)] и выберите порядок макета страницы в разделе [Pages per Sheet Layout (Количество страниц на листе)].

  8. Щелкните [OK (ОК)].

  9. При необходимости измените другие параметры, а затем нажмите [ОК].

  10. На экране [Печать] нажмите [Печать].

Для Mac OS X

  1. Откройте файл для печати.

  2. В меню [Файл] выберите [Печать].

  3. Выберите количество страниц, которые необходимо напечатать на каждом листе, с помощью параметра [Pages per Sheet (Страниц на листе)] на панели [Layout (Макет)].

  4. Установите все настройки с помощью параметров [Граница] и [Направление макета].

  5. При необходимости измените другие параметры, а затем нажмите [Печать].

Заметка

Если в диалоговом окне печати не отображаются настройки параметров, щелкните [Show Details (Показать подробности)] внизу диалогового окна.

Как напечатать определенную часть HTML-страницы с помощью CSS (@media:screen,@media:print)

определенная часть HTML-страницы с использованием CSS (@media:screen,@media:print)

Пользователь может щелкнуть ссылку или кнопку на HTML-странице или в форме, например. добавлять следующий код HTML:
Печать

 

Проблема в том, что команда печати распечатает всю страницу, что может не быть пригодным для использования.
Решение состоит в том, чтобы определить 2 разных стиля CSS для экран и принтер, так что ненужные части страницы будут скрыты при печать.

 

Как это работает:

Следующий пример должен показать, насколько просто это работает!
Страница содержит 3 части: верхний, средний и нижний колонтитулы, причем печатается только средняя часть.

 

Сначала нам нужно определить детали… это можно сделать, например, с помощью

<дел> теги.

…
<дел>
заголовок страницы

…

эта часть страницы содержит часть, которую мы хотим напечатать, например. форма

…


нижний колонтитул страницы

…

Теперь давайте определим код CSS

Конкретный код CSS можно определить непосредственно в заголовке HTML или с помощью файл таблицы стилей.



…

…

…

Приведенный выше код содержит код, если вы хотите напрямую добавить код CSS в заголовок HTML. Определение класса noprint устанавливает display:none, поэтому содержимое будет скрыто при печати страницы. Также можно использовать тег ,

или

вместо
. С использованием ID будет работать так же.

 

Вот и все. Альтернативой может быть использование двух разных файлов CSS (см. ниже)

 

 

В следующем коде показано, как использовать 2 разных файла CSS: один для экрана и один для принтера

Использование довольно простое, сделайте копию файла CSS и удалите все ненужные части с помощью display:none; в «style-print.css».

…

…

<ссылка rel="stylesheet" href="style-print. css» type=»text/css» media=»print»>
…

…

Отказ от ответственности: информация на этой странице предоставляется «как есть» без каких-либо гарантий. Кроме того, Arclab Software OHG не гарантирует и не делает никаких заявлений. относительно использования или результатов использования с точки зрения правильности, точности, надежности, актуальности или иным образом. См.: Лицензионное соглашение

Как напечатать HTML со стилем

🆕 🔜 Мечтаете о собственном интернет-бизнесе?

Опубликовано 14 апр 2018

Несколько советов по печати из браузера на принтер или в PDF-документ с использованием CSS

  • Печать CSS
  • CSS @media печать
  • Ссылки
  • Поля страницы
  • Разрывы страниц
  • Избегайте разрыва изображений посередине
  • Размер PDF
  • Отладка презентации печати

Несмотря на то, что мы все чаще смотрим на экраны, печать по-прежнему актуальна.

Даже с постами в блогах. Помню, как-то в 2009 году я встретил человека, который сказал мне, что заставил своего личного помощника печатать каждый пост в блоге, который я публикую (да, какое-то время я тупо смотрел на него). Определенно неожиданно.

Обычно я использую печать в формате PDF. Я могу создать что-то внутри браузера и хочу сделать это доступным в формате PDF.

Браузеры делают это очень просто: Chrome по умолчанию выбирает «Сохранить» при попытке распечатать документ, а принтер недоступен, а Safari имеет специальную кнопку в строке меню:

Печать CSS

Некоторые общие вещи вы можете захотеть сделать при печати, чтобы скрыть некоторые части документа, может быть, нижний колонтитул, что-то в заголовке, боковую панель.

Возможно, вы хотите использовать другой шрифт для печати, что вполне допустимо.

Если у вас большой CSS для печати, лучше использовать для него отдельный файл. Браузеры будут загружать его только при печати:

 <ссылка rel="таблица стилей"
      источник = "print.
 
 css"
      тип = "текст/CSS"
      media="print" />

CSS @media print

Альтернативой предыдущему подходу являются медиа-запросы. Все, что вы добавляете в этот блок:

 @media print {
  /* ... */
}

планируется применять только к печатным документам.

HTML великолепен благодаря ссылкам. Он называется HyperText по уважительной причине. При печати мы можем потерять много информации, в зависимости от содержимого.

CSS предлагает отличный способ решить эту проблему, отредактировав содержимое, добавив ссылку после текста тега , используя:

 @media print {
    a[href*='//']:после {
        содержание:" ("attr(href) ") ";
        цвет: $основной;
    }
}

Я нацеливаю a[href*='//'] , чтобы делать это только для внешних ссылок. У меня могут быть внутренние ссылки для навигации и внутренней индексации, которые в большинстве случаев бесполезны. Если вы также хотите, чтобы внутренние ссылки печатались, просто выполните:

 @медиа печать {
    а: после {
        содержание:" ("attr(href) ") ";
        цвет: $основной;
    }
}

Поля страницы

Вы можете добавить поля на каждую страницу. см или в — хороший блок для бумажной печати.

 @страница {
    поле сверху: 2 см;
    поле внизу: 2 см;
    поле слева: 2 см;
    поле справа: 2 см;
}

@page также можно использовать для таргетинга только на первую страницу, используя @page :first , или только на левую и правую страницы, используя @page :left и @page: right .

Разрывы страниц

Вы можете добавить разрывы страниц после некоторых элементов или перед ними. Используйте page-break-after и page-break-before :

 .book-date {
    разрыв страницы после: всегда;
}
.post-контент {
    разрыв страницы до: всегда;
}

Эти свойства принимают самые разные значения.

Избегайте разрыва изображений посередине

Я столкнулся с этим с Firefox: изображения по умолчанию обрезаются посередине и продолжаются на следующей странице. Это может случиться и с текстом.

Использовать

 р {
  разрыв страницы внутри: избегать;
}

и оберните изображения тегом p . Таргетинг img напрямую не работал в моих тестах.

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

Размер PDF

При попытке распечатать более 400 страниц PDF с изображениями с помощью Chrome изначально был создан файл размером более 100 МБ, хотя общий размер изображений был не таким уж большим.

Я пробовал с Firefox и Safari, и размер был меньше 10 МБ.

После нескольких экспериментов выяснилось, что в Chrome есть 3 способа печати HTML в PDF:

Это создает PDF-файл намного быстрее, чем двумя другими способами, и имеет гораздо меньший размер.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *