Как распечатать HTML-файл
Обновлено: 01.07.2024
"Кто печатает веб-страницы?" Я слышу, как ты плачешь! Относительно небольшое количество страниц когда-либо будет воспроизведено на бумаге. Но учтите:
- печать проездных или билетов на концерт
- воспроизведение маршрутов или расписаний
- сохранение копии для чтения в автономном режиме
- доступ к информации в районе с плохой связью
- использование данных в опасных или грязных условиях, например на кухне или на фабрике
- вывод черновика содержания для письменных аннотаций
- печать веб-квитанций для бухгалтерских целей
- предоставление документов людям с ограниченными возможностями, которым трудно пользоваться экраном
- печатать страницу для вашего коллеги, который отказывается использовать эту новомодную интернет-чушь.
К сожалению, печать страниц может быть неприятной:
- текст может быть слишком маленьким, слишком большим или слишком бледным
- столбцы могут быть слишком узкими, слишком широкими или выходить за пределы полей страницы
- разделы могут быть обрезаны или полностью исчезать
- чернила тратятся на ненужные цветные фоны и изображения
- URL-адреса ссылок не видны
- печатаются значки, меню и рекламные объявления, на которые нельзя щелкнуть!
Многие разработчики выступают за доступность в Интернете, но мало кто помнит о доступности печатной сети!
Преобразование адаптивных непрерывных носителей в постраничную бумагу любого размера и ориентации может оказаться непростой задачей. Тем не менее, управление печатью с помощью CSS существует уже много лет, а базовую таблицу стилей можно заполнить за несколько часов. В следующих разделах описываются хорошо поддерживаемые и практичные варианты подготовки ваших страниц к печати.
Печать таблиц стилей
Печать CSS может быть:
- Применяется в дополнение к стилям экрана. Взяв за основу стили экрана, стили принтера при необходимости переопределяют эти значения по умолчанию.
- Применяется как отдельный стиль. Стили экрана и печати совершенно разные; оба начинают со стилей браузера по умолчанию.
Выбор зависит от вашего сайта/приложения. Лично я большую часть времени использую стили экрана в качестве основы для печати. Тем не менее, я использовал отдельные таблицы стилей для приложений с совершенно разными результатами, таких как система бронирования сеансов конференций, которая отображала сетку расписания на экране, но хронологическое расписание на бумаге.
Таблица стилей для печати может быть добавлена в HTML после стандартной таблицы стилей:
Стили print.css будут применяться в дополнение к стилям экрана при печати страницы.
Чтобы разделить экран и печатные носители, main.css должен ориентироваться только на экран:
Кроме того, стили печати можно включить в существующий файл CSS с помощью правил @media. Например:
Можно добавить любое количество правил печати @media, поэтому это может быть удобно для объединения связанных стилей. При необходимости правила экрана и печати также можно разделить:
Тестирование вывода на принтер
Нет необходимости убивать деревья и использовать невероятно дорогие чернила каждый раз, когда вы хотите протестировать макет для печати! Следующие параметры воспроизводят стили печати на экране.
Предварительный просмотр печати
Наиболее надежным вариантом является предварительный просмотр печати в вашем браузере. Здесь показано, как будут обрабатываться разрывы страниц при использовании размера бумаги по умолчанию.
Кроме того, вы можете сохранить или просмотреть страницу, экспортировав ее в PDF.
Инструменты разработчика
Инструменты разработчика ( F12 или Cmd/Ctrl + Shift + I ) могут эмулировать стили печати, хотя разрывы страниц отображаться не будут.
В Chrome откройте Инструменты разработчика и выберите Дополнительные инструменты, а затем Рендеринг в меню с тремя точками в правом верхнем углу. Измените Эмулировать CSS-носитель для печати в нижней части этой панели.
В Firefox откройте Инструменты разработчика и щелкните значок «Включить моделирование печатных носителей» на панели стилей вкладки «Инспектор»:
Взломайте свой медиа-атрибут
Опять же, это не покажет разрывы страниц. Не забудьте восстановить атрибут media="print" после завершения тестирования.
Удалить ненужные разделы
Прежде чем делать что-либо еще, удалите и сверните лишнее содержимое с помощью display: none; . Типичные ненужные разделы на бумаге могут включать меню навигации, основные изображения, верхние и нижние колонтитулы, формы, боковые панели, виджеты социальных сетей и рекламные блоки (обычно все, что находится в iframe):
Возможно, потребуется использовать display: none !important; если функции CSS или JavaScript отображают элементы в соответствии с определенными состояниями пользовательского интерфейса. Использование !important обычно не рекомендуется, но мы можем оправдать его использование в базовом наборе стилей печати, которые имеют приоритет над настройками экрана по умолчанию.
Линеаризовать макет
Мне больно это говорить, но Flexbox и Grid редко хорошо работают с макетами принтеров в любом браузере. Если у вас возникнут проблемы, рассмотрите возможность использования display: block; или аналогичные на полях макета и при необходимости отрегулируйте размеры. Например, установите ширину: 100%; на всю ширину страницы.
Стили печати
Теперь можно применять стиль для печати. Рекомендации:
- убедитесь, что вы используете темный текст на белом фоне
- рассмотрите возможность использования шрифта с засечками, который может быть легче читать
- отрегулируйте размер текста до 12pt или выше
- при необходимости измените отступы и поля. Стандартные см , мм или единицы измерения могут быть более практичными.
Дополнительные предложения включают…
Применить столбцы CSS
Стандартная бумага формата A4 и US Letter может привести к получению более длинных и менее читаемых строк текста. Рассмотрите возможность использования столбцов CSS в макетах для печати. Например:
В этом примере столбцы будут созданы, когда по горизонтали останется не менее 37 эм. Нет необходимости задавать медиа-запросы; дополнительные столбцы будут добавлены на более широкой бумаге.
Используйте границы вместо цветов фона
В вашем шаблоне могут быть разделы или выноски, обозначенные более темными или инверсными цветовыми схемами:
Экономьте чернила, представляя эти элементы рамкой:
< бр />
Удалить или инвертировать изображения
Пользователи не захотят печатать декоративные и несущественные изображения и фоны. Вы можете рассмотреть вариант по умолчанию, при котором все изображения скрыты, если у них нет класса печати:
В идеале печатные изображения должны использовать темные цвета на светлом фоне. Цвета SVG, встроенные в HTML, можно изменить в CSS, но возможны ситуации, когда у вас более темные растровые изображения:
Фильтр CSS можно использовать для инвертирования и настройки цветов в таблице стилей печати. Например:
Добавить дополнительный контент
В печатных СМИ часто требуется дополнительная информация, которая не требуется на экране. Свойство содержимого CSS можно использовать для добавления текста к псевдоэлементам ::before и ::after. Например, отображать URL ссылки в скобках после текста:
Или вы можете добавить сообщения только для печати:
В более сложных ситуациях рассмотрите возможность использования класса, такого как print, для элементов, которые должны быть видны только при печати. Например:
Примечание. Большинство браузеров отображают URL-адрес и текущую дату/время в верхнем и/или нижнем колонтитуле распечатываемой страницы, поэтому генерировать эту информацию в коде редко требуется.
Разрывы страниц
Свойства CSS3 break-before и break-after позволяют управлять поведением разрывов страницы, столбца или области до и после элемента. Поддержка отличная, но старые браузеры могут использовать аналогичные свойства разрыва страницы до и после разрыва страницы.
Можно использовать следующие значения разрыва до и разрыва после:
- auto : значение по умолчанию — перерыв разрешен, но не принудительен
- avoid : избегайте разрыва страницы, столбца или области.
- avoid-page : избежать разрыва страницы
- страница: принудительный разрыв страницы
- всегда : псевдоним страницы
- слева: разрыв страницы, чтобы следующая страница была левой.
- справа : принудительно разбить страницу, чтобы следующая была правильной страницей.
Пример: принудительный разрыв страницы непосредственно перед любым
Примечание: будьте осторожны с чрезмерным использованием разрывов страниц. В идеале вывод на принтер должен занимать как можно меньше страниц.
Свойство break-inside (и более раннее свойство page-break-inside ) указывает, разрешен ли разрыв страницы внутри элемента. Обычно поддерживаемые значения:
- auto : значение по умолчанию — перерыв разрешен, но не принудительен
- avoid : по возможности избегайте внутреннего разрыва
- avoid-page : по возможности избегайте внутреннего разрыва страницы
Это может быть предпочтительнее, чем указание разрывов страниц, поскольку вы можете использовать как можно меньше бумаги, избегая при этом разрывов страниц в сгруппированных данных, таких как таблицы или изображения:
Свойство widows определяет минимальное количество строк в блоке, которое должно отображаться вверху страницы. Представьте себе блок с пятью строками текста. Браузер хочет сделать разрыв страницы после четвертой строки, чтобы последняя строка отображалась вверху следующей страницы.Установка вдов: 3; разрывается на второй строке или перед ней, поэтому на следующую страницу переносятся как минимум три строки.
Свойство orphans похоже на свойство widows, за исключением того, что оно определяет минимальное количество строк, отображаемых внизу страницы.
Свойство box-decoration-break управляет границами элементов на страницах. Когда элемент с рамкой имеет внутренний разрыв страницы:
- slice : по умолчанию разделяет макет. Верхняя граница отображается на первой странице, а нижняя — на второй.
- clone: копирует поля, отступы и границы. Все четыре границы отображаются на обеих страницах.
Наконец, CSS Paged Media ( @page ) имеет ограниченную поддержку браузеров, но позволяет настраивать таргетинг на определенные страницы, чтобы можно было определить альтернативные поля или разрывы:
Свойства разрыва страницы в CSS можно поместить в стили экрана или печати, поскольку они влияют только на печать, но для ясности я рекомендую использовать их в CSS для печати.
Имейте в виду, что управление разрывами страниц — это не более чем подсказка для браузера. Нет никакой гарантии, что разрыв будет принудительным или его удастся избежать, поскольку макет ограничен рамками бумаги.
Труды печати
Управление печатью веб-материалов всегда будет ограничено, а результаты могут различаться в разных браузерах. Это сказало:
- удобные для печати таблицы стилей можно установить на любой сайт
- большинство стилей печати будут работать в большинстве браузеров
- стили печати не повлияют на существующие функции и не нарушат их.
- затраты на разработку минимальны.
Добавление нескольких разрывов страниц и удаление ненужных разделов порадует пользователей и поднимет ваш сайт выше конкурентов. Добавьте это в свой список дел!
Преобразование файла HTML в формат PDF — это один из способов создания электронного документа, который будет корректно отображаться на любом компьютере. Universal Document Converter является оптимальным решением для этого типа преобразования, поскольку он предлагает полный контроль над широким диапазоном параметров, сохраняя при этом простоту процесса для пользователя. Преобразованные файлы соответствуют всем требованиям и могут быть открыты любой программой просмотра PDF.
Пожалуйста, следуйте этому руководству, чтобы начать преобразование документа HTML.
Загрузите и установите программу Universal Document Converter на свой компьютер.
Откройте веб-страницу в Internet Explorer. В главном меню перейдите в Сервис->Свойства обозревателя->Дополнительно. В разделе «Печать» установите флажок «Печатать фоновые цвета и изображения» и нажмите «ОК».
Чтобы удалить верхний и нижний колонтитулы из выходного PDF-файла, нажмите Файл->Параметры страницы в главном меню. Удалите весь текст из полей верхнего и нижнего колонтитула и нажмите OK.
Нажмите Файл->Печать… в главном меню Internet Explorer.
Выберите Universal Document Converter из списка принтеров и нажмите кнопку «Настройки».
На панели настроек нажмите Загрузить свойства.
В диалоговом окне "Открыть" выберите "Веб-страница в PDF.xml" и нажмите "Открыть".
Нажмите кнопку «Печать», чтобы начать преобразование. Когда PDF-файл будет готов, он по умолчанию будет сохранен в папке Мои документы\UDC Output Files.
Преобразованный документ затем будет открыт Adobe Acrobat или другим средством просмотра, связанным с файлами PDF на вашем компьютере.
Похожие руководства по конверсии:
- Преобразовать HTML в: TIFF, JPG
- Создание файла PDF из: QuarkXPress, TIFF, изображений, доступа, веб-страницы, PDF, CHM, DjVu, Outlook, изображений, документов, Excel, файла документа, Visio, AutoCAD, PowerPoint, Excel, Word.
Органист и руководитель хора в католических церквях Святого Августина и Святой Марии
Небольшая библиотека JavaScript для облегчения печати из Интернета.
Печать PDF
Print.js был в первую очередь написан, чтобы помочь нам печатать PDF-файлы непосредственно в наших приложениях, не выходя из интерфейса и не используя встраивания.Для уникальных ситуаций, когда пользователям не нужно открывать или скачивать PDF-файлы, а нужно просто распечатать их.
Один из сценариев, когда это полезно, например, когда пользователи запрашивают печать отчетов, созданных на стороне сервера. Эти отчеты отправляются обратно в виде файлов PDF. Нет необходимости открывать эти файлы перед печатью. Print.js предлагает быстрый способ распечатать эти файлы в наших приложениях.
Файлы PDF должны обслуживаться из того же домена, в котором размещено ваше приложение. Print.js использует iframe для загрузки файлов перед их печатью, поэтому он ограничен той же политикой происхождения. Это помогает предотвратить атаки межсайтового скриптинга (XSS).
Пример
Добавьте кнопку для печати PDF-файла, расположенного на вашем хост-сервере:
Для больших файлов вы можете показывать пользователю сообщение при загрузке файлов.
Печать большого PDF (файл 5 МБ) Печать очень большого PDF (файл 16 МБ)
Библиотека поддерживает печать PDF в формате base64:
Печать PDF-файла base64
HTML-печать
Иногда нам просто нужно напечатать выбранные части HTML-страницы, и это может быть непросто. С помощью Print.js мы можем легко передать идентификатор элемента, который хотим напечатать. Элемент может иметь любой тег, если он имеет уникальный идентификатор. Библиотека попытается напечатать его очень близко к тому, как он выглядит на экране, и в то же время создаст для него удобный для печати формат.
Пример
Добавить кнопку печати в HTML-форму:
Print.js принимает объект с аргументами. Снова распечатаем форму, но теперь добавим заголовок на страницу:
Печать формы с заголовком
Печать изображений
Print.js можно использовать для быстрой печати любого изображения на странице путем передачи URL-адреса изображения. Это может быть полезно, когда у вас есть несколько изображений на экране, используя версии изображений с низким разрешением. Когда пользователи пытаются распечатать выбранное изображение, вы можете передать URL-адрес с высоким разрешением в Print.js.
Пример
Загружайте изображения на свою страницу только с тем разрешением, которое вам нужно на экране:
По умолчанию SAS возвращает очень полный объем информации в выходных данных своих процедур. Обычно анализ включает процедуру, выполняемую отдельно для групп в наборе данных или для списка переменных. В выводе такого повторяющегося анализа может быть трудно ориентироваться при прокрутке окна вывода. Запись выходных данных SAS в файлы .pdf и .html позволяет просматривать выходные данные в удобной для навигации форме с помощью закладок. В примерах мы будем использовать набор данных hsb2.
Отправка вывода в файл .pdf
Система доставки выходных данных (ODS) может создать файл .pdf, содержащий закладки для таблиц в выходных данных. Ниже мы запускаем регрессионную модель отдельно для каждой из четырех расовых категорий в наших данных. Перед процедурой регистрации мы сначала сортируем данные по расе, а затем открываем файл .pdf, в который записывается вывод. Когда мы закончим, мы закроем .pdf.
Мы можем открыть наш файл .pdf и использовать закладки, чтобы перейти к выходным данным каждой гонки и внутри каждой гонки перейти к определенным выходным таблицам.
< бр />
До сих пор мы использовали настройки по умолчанию для нашего файла .pdf. SAS предлагает несколько стандартных стилей, из которых мы можем выбирать, и, если ни один из них вам не нравится, вы можете (приложив некоторые усилия) указать свои предпочтения для всех компонентов, входящих в стиль, чтобы создать свой собственный. Некоторые стандартные стили представляют собой цветовые вариации по умолчанию, но некоторые выглядят совсем по-другому. Если вы укажете «стиль = минимальный», вывод в вашем файле .pdf будет выглядеть как окно вывода с рамками вокруг блоков вывода. Если указать «style=theme», в блоках вывода будет меньше строк, а заголовки будут более отформатированы, чем в «минимальном» стиле.
< бр />
< бр />
Помимо изменения общего стиля, существуют и другие способы управления внешним видом и структурой файла .pdf. Например, вы можете добавить оглавление в начало вашего файла, указав, какой вывод появляется на какой странице с опцией содержимого. Если отображаемые по умолчанию закладки слишком детализированы для вас, вы можете изменить количество отображаемых уровней с помощью параметра pdftoc. Обычные заголовки и субтитры, которые вы можете добавить к выходным данным SAS, отражаются в вашем .pdf, а также любые параметры, которые вы указываете в операторе параметров, например удаление даты и времени или выравнивание вывода по левому краю, а не по центру.
Ниже мы создаем оглавление и ограничиваем количество уровней закладок до 2, а также используем параметры и операторы заголовков в SAS.
< бр />
Дополнительные сведения о настройке файлов .pdf с помощью ods см. в следующих документах SAS:
Отправка вывода в файл .html
ПРИМЕЧАНИЕ. Код в этом разделе создает файлы, которые можно открыть в Internet Explorer. Нам не удалось открыть эти файлы в других браузерах.
Система доставки вывода (ods) может генерировать файлы .html для вывода SAS так же, как и файл .pdf. Опять же, мы запускаем регрессионную модель отдельно для каждой из четырех расовых категорий в наших данных. Перед запуском нашей регрессии мы открываем файл .html, в который записываются выходные данные. Когда мы закончим, мы закроем файл .html.
Мы можем открыть этот файл в Internet Explorer и просмотреть наш вывод.
< бр />
Если мы хотим иметь возможность переходить к определенным частям нашего вывода, мы можем легко добавить панель содержимого. Вместо создания одного файла .html мы создадим несколько: «тело» страницы, содержащее выходные данные, «содержимое», которое ссылается на части тела, и «фрейм», объединяющий их. Чтобы просмотреть содержимое в виде боковой панели к телу, мы откроем файл фрейма.
< бр />
Как и в случае с файлами .pdf, вы можете выбрать один из стандартных шаблонов SAS или создать свой собственный, чтобы настроить внешний вид сгенерированного файла. Это только верхушка айсберга SAS-to-HTML, но мы уже видели простой способ перемещаться по длинному выходу SAS.
Читайте также: