Простой пример печати - PullRequest
Новая
       15

Простой пример печати

4 голосов
/ 20 декабря 2011

Мне нужно предоставить ссылку print на мою простую HTML-страницу.

Когда пользователь нажимает на это, я хочу всплывающее окно, которое отображает print preview, и должен появиться системный принтер. Я думаю, что-то с параметром window.print();, но это напрямую дает возможность печати окна без предварительного просмотра. Я хочу сначала просмотреть страницу, а затем вызвать window.print (); Пример HTML поможет ...

Более того, в приведенном вами примере также может быть напечатан тип носителя. Так что нормальный цвет HTML выглядит красным. Но когда ссылка для печати выбрана, нам нужно показать предварительный просмотр в синем цвете. Я знаю, что это могут быть переопределены методы с использованием @media print в файле CSS.

Любой пример, пожалуйста ... Спасибо

Ответы [ 2 ]

2 голосов
/ 20 декабря 2011

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

Что касается стилей печати, вам следует ознакомиться с таблицами стилей печати.Статья, составленная Эриком Мейером несколько лет назад, является отличным началом с несколькими приличными примерами.http://www.alistapart.com/articles/goingtoprint/

0 голосов
/ 20 декабря 2011

Предположим, что report.html - это страница, которую вы хотите распечатать. Разработайте страницу таким образом, чтобы она принимала аргумент медиа как параметр GET. то есть что-то вроде yoursite.com/report.html?media=X - где X может быть 'screen', 'print' и т. д. Если X пусто, он может использовать значение по умолчанию 'screen'

Запишите 2 файла css, а именно screen.css и print.css. В зависимости от этого значения аргумента media (X) импортируйте на свою страницу либо screen.css, либо print.css.

В screen.css напишите ваши определения стиля в блоке '@media screen', например: 

@media screen {
  body {
  ... screen style here ...
  }
}

В print.css напишите ваши определения стиля в блоке '@media screen, print', например: 

@media screen, print {
  body {
  ... print style here ...
  }
}

Предположим, что в вашем report.html есть кнопка печати, в ее onclick вызовите window.open('report.html?media=print', ...). Также сделайте то же самое с обработчиком клавиш, прикрепленным к объекту вашего документа при получении Ctrl + P.

Кроме того, в onload вашей страницы проверьте, является ли аргумент media 'print', и если это так, после небольшой задержки (скажем, 500 мс) вызовите window.print(), то есть что-то вроде: 

if(window.location.href.indexOf('media=print')!=-1) {
  setTimeout(function() { window.print(); }, 500);
}
...