Comments 17
Это довольно редко затрагиваемая тема, спасибо
Большое спасибо. Была потребность организовать не кривое отображение HTML на A4. Для распечатки методических материалов... Спасибо...
Отличная и ,главное, полезная работа, спасибо
Примерно так же закостылил пару проектов несколько лет назад, правда с мои знания CSS слишком унылы, поэтому выкручивался флексбоксами и единицами измерения *vh для нормального деления страниц.
Всё потому что было не ясно, где лучше генерировать pdf - на бэке или фронте. Что там, что там интерфейс был крайне ужасным, рисовать нужно было немного специфичные таблицы (которые на обычном html+css верстаются сильно проще по опыту).
А так как в целом заказчика устраивало, что при нажатии кнопочки "pdf" ему выплелывал браузер нативное окно печати, откуда можно было сохранить в pdf, то это стало спасением.
Правда в моем случае еще пришлось немного побивать колеса этому велосипеду, делая загрузку html через iframe, а потом еще немного костылить css под firefox и chrome, т.е. у них немного отличалось поведение.
Положил в закладочки статью - это прям очень полезно.
А так как в целом заказчика устраивало, что при нажатии кнопочки "pdf" ему выплелывал браузер нативное окно печати, откуда можно было сохранить в pdf, то это стало спасением.
Не повторяйте моих ошибок - делайте на бэке.
Говорит, значит, заказчик - страничка с таблицами и графиками - супер, всем нравится - а можно нам с неё сразу pdf получать? Говорю, ок. Поковырялся в жабьем скрипте, немного поправил ещё стили и, тоже, через стандартную печать в браузере выдал им pdf по нажатию кнопки. Все счастливы.
Через день приходит и говорит - а можно чтобы по кнопке оно не на экран, а письмом отправлялось группе клиентов - я ж вижу что всё готово, вот только письмо и все?
А у меня там кроме таблиц еще и графики красиво через HighCharts рисуются. Пожелал ему и его маме долгих лет и решил что проще всего будет печатать на фронте в pdf, а потом отсылать бинарник на бэк и там - в письмо. Костыли, но мне и так этот клиент платит копейки.. Сделал, клиент счастлив.
Через день приходит и говорит - всё супер, всем нравится. А теперь можно чтобы это письмо не по кнопке отправлялось, а само каждый день в 2 часа ночи - у тебя ж всё почти готово?
Думаю, после моих пожеланий его мама лет на 100 дольше проживёт... Пришлось переделывать всё в рендеринг на бэке через html2pdf, ещё больше костылей и граблей, графики на matplotlib кое-как..
Ну, в моей ситуации я объяснил как будет реализовано и с чем связана сложность, что делать делать условно на бэке это будет дольше, дороже и не факт что красиво. Поэтому их устроил вариант с печатью через браузер. На всякий случай еще уточнил кейс использования - раз в неделю нужно распечатать и т.п.
Бэк работает на golang и там большие проблемы с поиском библиотеки для pdf как бы...
В крайнем случае стал бы измываться с движком хрома в докере на который посылается html, вызывается печать - не знаю, это вопрос уже фантазии конечно :)
Я писал себе консольную утилитку на golang для расчета налогов ИП и печати КУДиР (книги учета доходов и расходов) - использовал библиотеку gopdf. Библиотека довольно низкоуровневая - пришлось добавить более высокоуровневый АПИ под мои кейсы.
Сейчас утилиту перенес в веб - вся логика расчетов и генерации PDF не поменялась и по-прежнему реализована на golang, но компилится в wasm. Бэка нет вообще.
Да, висит звездочка на этой репе... Смотрю и допиливают активно постоянно.
Так или иначе года 2 назад мне стало дурно от того, что надо будет ВОТ ТАК описывать рендеринг pdf, вместо того чтобы что-то там на HTML накрутить, CSS присолить, а дальше браузер сам разберется как это всё впихнуть на A4 :)))
Надо пощупать в общем. И про WASM действительно интересный кейс, всегда о нём забываю и удивляюсь такому простому и клевому применению.
Насколько я понимаю, это перевод вот этой статьи, да?
Это нужно передать тем кто делает сайт Госуслуги ру.
Вообще в CSS есть целая отдельная спека для печати. Там помимо @page есть ещё всякие интересные элементы для создания верхних и нижних повторяющихся колонтитулов, сносок, нумерации страниц, титульной страницы. Можно даже автоматическое оглавление делать. Подробнее об этом можно посмотреть в записи доклада с wsd, все ещё актуально.
Подскажите, насколько возможно из браузера печатать чертежи? т.е. есть нарисовать например квадрат на canvas и чтобы на бумаге он точно соответствовал размеру до миллиметров?
Я с уважением отношусь к автору перевода... но, скажите, кому-то ещё было неизвестно о существовании media="print"?
Я узнал про его существование, когда работал с шаблонами интернет-магазинов. Там часто делают кнопку "Печать" для страницы с историей заказов, корзины и страницы успешного/неуспешного оформления заказа. Так вот там используют медиа-запросы @media (print) и <link> с media="print" чтобы подключить отдельные стили для печати и удалить всё лишнее (хедер, футер, баннеры, боковые колонки), перекрасить всё в чёрно-белый, адаптировать что-то.
Также media="print" можно встретить при реализации техники ленивой загрузки CSS, что как бы не совсем по назначению, но оно работает.
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.onload=null;this.removeAttribute('media');">
Подскажите, а данный способ подходит для печати любых размеров документов? Ну например если нужно распечатать этикетку 58x40?
CSS для печати на бумаге