Периодически требуется сохранить в PDF содержимое сложно оформленной веб-страницы — например, содержащей блоки текста со своей собственной прокруткой, где в каждый момент видна только часть текста, размещенного в блоке. Если такое сохранять стандартными средствами браузера, то в файл также сохраняется только видимая часть текста из каждого такого блока.

Есть ли способы сохранить в PDF все, что браузер "статически видит" на странице? Понятное дело, я не претендую на сохранение того, что динамически генерируют скрипты — только того, что на данный в явном виде загружено в структуру HTML-документа. Пусть это будет коряво, лишь бы полностью, и в более читабельном виде, чем page source.

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Периодически требуется сохранить в PDF содержимое сложно оформленной веб-страницы — например, содержащей блоки текста со своей собственной прокруткой, где в каждый момент видна только часть текста, размещенного в блоке. Если такое сохранять стандартными средствами браузера, то в файл также сохраняется только видимая часть текста из каждого такого блока.

ЕМ>Есть ли способы сохранить в PDF все, что браузер "статически видит" на странице? Понятное дело, я не претендую на сохранение того, что динамически генерируют скрипты — только того, что на данный в явном виде загружено в структуру HTML-документа. Пусть это будет коряво, лишь бы полностью, и в более читабельном виде, чем page source.

Print в Хроме м выбрать в качестве принтера "Сохранить в PDF" не устраивает ?

Здравствуйте, Pavel Dvorkin, Вы писали:

PD>Print в Хроме м выбрать в качестве принтера "Сохранить в PDF" не устраивает ?

Нет — он так же не сохраняет то, что за пределами границы блока.

Здравствуйте, Евгений Музыченко, Вы писали:


ЕМ>Есть ли способы сохранить в PDF все, что браузер "статически видит" на странице?

В общем случае нет

Здравствуйте, Евгений Музыченко, Вы писали:

PD>>Print в Хроме м выбрать в качестве принтера "Сохранить в PDF" не устраивает ?

ЕМ>Нет — он так же не сохраняет то, что за пределами границы блока.

Как так ? Там же указывается диапазон страниц.

Сейчас проверил — все вроде берет. Взял станицу с rbc.ru, получил PDF в 5.7 Мб.

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ> Есть ли способы сохранить в PDF все, что браузер "статически видит" на странице? Понятное дело, я не претендую на сохранение того, что динамически генерируют скрипты — только того, что на данный в явном виде загружено в структуру HTML-документа. Пусть это будет коряво, лишь бы полностью, и в более читабельном виде, чем page source.

Попробуй расширение SingleFile. Сохраняет в html внедряя все внешние объекты.

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Периодически требуется сохранить в PDF содержимое сложно оформленной веб-страницы —


Я использую FireShot, расширение для хрома.

Здравствуйте, Pavel Dvorkin, Вы писали:

ЕМ>>Нет — он так же не сохраняет то, что за пределами границы блока.

PD>Там же указывается диапазон страниц.

Страницы-то при чем? Я говорю о блоках внутри страницы (например, div с overflow=scroll).

PD>Сейчас проверил — все вроде берет.

Вот, накидал для примера.

Здравствуйте, rudzuk, Вы писали:

R>Сохраняет в html внедряя все внешние объекты.

Так мне не надо внешние — надо то, что уже внутри страницы (ее структуры HTML). Выше дал ссылку на примитивный пример.

Здравствуйте, Ziaw, Вы писали:

Z>Я использую FireShot

Попробовал на самопальной странице — не разворачивает то, что за пределами блока.

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ> R>Сохраняет в html внедряя все внешние объекты.

ЕМ> Так мне не надо внешние — надо то, что уже внутри страницы (ее структуры HTML). Выше дал ссылку на примитивный пример.

Имеется ввиду, что он все картинки и все что подтягивается на страницу сохранит в одном файле. С твоим примером оно справилось.

r> С твоим примером оно справилось.

Впрочем, если нужен обязательно pdf, то не подойдет.

Здравствуйте, rudzuk, Вы писали:

R>он все картинки и все что подтягивается на страницу сохранит в одном файле.

Так это делает и Firefox в режиме "Web page, complete".

R>С твоим примером оно справилось.

Что значит "справилось"? Ну сохранило оно его в HTML, а дальше что? Мне-то в итоге нужно это перегнать в PDF, чтоб все блоки были хоть как-то раскрыты — пусть и коряво, но явно.

Нужно это для того, чтобы сохранять в качестве доказательства страницы с важным содержимым. Например, сведения о каких-то объектах, переписку на сайте госконторы/организации, когда движок сервера использует вложенные блоки с прокруткой для отображения содержимого. Вот сейчас, например, хочу сохранить переписку с французской налоговой, сервер которой показывает список обращений в одном блоке с прокруткой, а историю переписки по конкретному обращению вставляет туда в виде вложенного блока, тоже с прокруткой. В Page Source все содержимое есть, но при печати в итоговом документе видны только "текущие" части каждого блока.

Я, конечно, могу открыть в браузере Developer Tools, найти там эти блоки, увеличить их размер и т.п., но думал, вдруг есть что-то готовое.

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Вот, накидал для примера.

Так добавьте:

.Block {
  max-height: none;
  white-space: initial;
  word-wrap: break-word;
}

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ> R>он все картинки и все что подтягивается на страницу сохранит в одном файле.

ЕМ> Так это делает и Firefox в режиме "Web page, complete".

Нет. Лис в этом случае сохраняет страницу, а все внешние объекты сохраняет в папку одноименную, рядом лежащую.

ЕМ> Нужно это для того, чтобы сохранять в качестве доказательства страницы с важным содержимым.

Доказательством может служить только pdf?

Здравствуйте, kov_serg, Вы писали:

_>Так добавьте:

Куда добавить?

Здравствуйте, rudzuk, Вы писали:

R>Лис в этом случае сохраняет страницу, а все внешние объекты сохраняет в папку одноименную, рядом лежащую.

Чем это отличается в плане хранения, а не пересылки/демонстрации?

R>Доказательством может служить только pdf?

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

Какова вероятность, что они сумеют открыть тот "единый" HTML, который создаст SingleFile, и что они получат, напечатав его? А если напечатать нужно будет мне?

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Куда добавить?

Везде где есть scroll

	типа такого
	var styleSheet = document.createElement("style"); styleSheet.innerText = ` .unroll { max-height: none !important; white-space: initial !important; word-wrap: break-word !important; }`; document.head.appendChild(styleSheet); document.querySelectorAll('*').forEach(el => { var vs = el.scrollHeight > el.clientHeight; if (vs) { console.log(el); el.classList.add("unroll"); } });

Если этот скролл исчезает от увеличения высоты окна браузера, то можно выставить высоту окна на очень большую и попробовать распечатать. По крайней мере скриншоты страниц я так делал. Чтобы выставить большую высоту окна, надо в chrome developer tools нажать Device Toolbar (типа мобильный вид) и там выставить любую высоту (точней больше 9999 пикселей не даёт, но может этого хватит).

Здравствуйте, kov_serg, Вы писали:

ЕМ>>Куда добавить?

_>Везде где есть scroll

Предлагаете мне написать в поддержку всех сайтов, где это есть, чтоб добавили? Или я чего не понял?

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ> R>Лис в этом случае сохраняет страницу, а все внешние объекты сохраняет в папку одноименную, рядом лежащую.

ЕМ> Чем это отличается в плане хранения, а не пересылки/демонстрации?

Или две сущности хранить, или одну. Разница очевидна.

ЕМ> R>Доказательством может служить только pdf?

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

ЕМ> Какова вероятность, что они сумеют открыть тот "единый" HTML, который создаст SingleFile, и что они получат, напечатав его? А если напечатать нужно будет мне?

html окрывается везде И, насколько мне известно, печатать все браузеры обучены.

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Предлагаете мне написать в поддержку всех сайтов, где это есть, чтоб добавили?
В идеале да, они должны поддерживать media print, но большинству пофиг.

ЕМ>Или я чего не понял?
Нет просто после загрузки страници. js скрипт разворачивает все блоки (и добавляет другие костыли). Затем вы печатаете получившуюся хрень в pdf.

Здравствуйте, rudzuk, Вы писали:

R>Или две сущности хранить, или одну.

Да хоть десять. Какой смысл это всё делать?

R>html окрывается везде И, насколько мне известно, печатать все браузеры обучены.

Такое впечатление, что Вы себе представляете нечто отличное от того, что делает предложенный Вами SingleFile. Если я сохраню в нем страницу, а затем открою ее сам, или ее откроют другие — они увидят ту же самую картину — с блоками, которые нужно скроллить туда-сюда. А если захотят напечатать, то на бумаге будет та же кусочная хрень, что и с исходной страницы. Так зачем мне это?

Здравствуйте, kov_serg, Вы писали:

_>после загрузки страници. js скрипт разворачивает все блоки (и добавляет другие костыли)

Ну да, это то, что я упоминал в виде крайней меры — лезть самому в исходник страницы и править его (вручную или скриптом). Если не найдется ничего лучше — придется так.

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Ну да, это то, что я упоминал в виде крайней меры — лезть самому в исходник страницы и править его (вручную или скриптом). Если не найдется ничего лучше — придется так.

Скажу больше: эти скрипты придётся допиливать под особо одарённые страницы отдельно.

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Есть ли способы сохранить в PDF все, что браузер "статически видит" на странице? Понятное дело, я не претендую на сохранение того, что динамически генерируют скрипты — только того, что на данный в явном виде загружено в структуру HTML-документа. Пусть это будет коряво, лишь бы полностью, и в более читабельном виде, чем page source.

"Скролловость" состоит из двух частей:

1. У контейнера есть стиль overflow: scroll или overflow: auto
2. Размер контейнера каким-то образом ограничен

Можно в лоб найти все элементы п.1 и поменять у них стиль на overflow: visible. Текст будет рисоваться за пределами контейнера. В зависимости от дизайна возможно это будет читаемо.

Более работоспособное решение — это найти все элементы п.1, и убрать у них ограничение высоты. Тогда элементы-контейнеры вырастут по высоте и перестанут показывать скролл. Тут проблема в том, что существует очень много способов ограничить высоту элемента, т.е. в общем случае убрать это ограничение очень проблематично.

Если общее решение не нужно, а просто есть несколько сайтов/несколько страниц, я бы просто руками написал переопределения стилей и после этого спокойно печатал бы в PDF.

Здравствуйте, vsb, Вы писали:

vsb>Если этот скролл исчезает от увеличения высоты окна браузера

Где-то исчезает, но не везде.

vsb>в chrome developer tools нажать Device Toolbar (типа мобильный вид) и там выставить любую высоту

Если только потом ничего не делать на странице. В Chrome ж это реализовано убого — масштаб невозможно ввести вручную, там или выбор от 50% и выше, или Fit Width, при котором может быть ни черта не видно.

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Попробовал на самопальной странице — не разворачивает то, что за пределами блока.

В таком кейсе вообще непонятно, как должен выглядеть результирующий pdf. Во что развернуть? Кажется с такими страницами не один автомат адекватно не справится, надо сначала какие-то ручные стили дописать.

Здравствуйте, Ziaw, Вы писали:

Z>непонятно, как должен выглядеть результирующий pdf.

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

Z>Во что развернуть?

В прямоугольник, содержащий весь текст блока, без прокрутки. По возможности расположить эти прямоугольники так, чтоб не оставалось слишком много пустого места.

Здравствуйте, Евгений Музыченко, Вы писали:

Z>>Во что развернуть?

ЕМ>В прямоугольник, содержащий весь текст блока, без прокрутки. По возможности расположить эти прямоугольники так, чтоб не оставалось слишком много пустого места.

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

Здравствуйте, Ziaw, Вы писали:

Z>Примени кастомный стиль

Понятно, что можно заняться хакерством средствами продвинутого браузера, но хочется готовенького.

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Здравствуйте, Pavel Dvorkin, Вы писали:
PD>>Print в Хроме м выбрать в качестве принтера "Сохранить в PDF" не устраивает ?
ЕМ>Нет — он так же не сохраняет то, что за пределами границы блока.

При "печати" на самом деле происходит рендеринг страницы заново. При этом
может использоваться (если подсунуть) отдельный stylesheet, в котором показывается
всё что нужно (а не прокручивается, как на экране). Как можно поступить: сохранить
html, в нём подправить/заменить CSS, потом загрузить и печатать.

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Здравствуйте, kov_serg, Вы писали:

_>>Так добавьте:

ЕМ>Куда добавить?

Открыть отладчик (в хроме -- Ctrl, Alt, I) и вписать в стили для всех элементов с ключевым словом !important.
Имеется ввиду, один раз вписать. И оно подействует на всё.

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Нужно это для того, чтобы сохранять в качестве доказательства страницы с важным содержимым. Например, сведения о каких-то объектах, переписку на сайте госконторы/организации, когда движок сервера использует вложенные блоки с прокруткой для отображения содержимого. Вот сейчас, например, хочу сохранить переписку с французской налоговой, сервер которой показывает список обращений в одном блоке с прокруткой, а историю переписки по конкретному обращению вставляет туда в виде вложенного блока, тоже с прокруткой. В Page Source все содержимое есть, но при печати в итоговом документе видны только "текущие" части каждого блока.

Записывать видео с десктопа. Полно софта.

ЕМ>Я, конечно, могу открыть в браузере Developer Tools, найти там эти блоки, увеличить их размер и т.п., но думал, вдруг есть что-то готовое.

Но возникает вопрос. Что рядом не сидит нотариуса, который заверит,
что в Developer Tools (или при записи видео) не было внесено ничего лишнего.

Здравствуйте, fk0, Вы писали:

fk0>Что рядом не сидит нотариуса, который заверит, что в Developer Tools (или при записи видео) не было внесено ничего лишнего.

Вы смогли бы найти такого нотариуса? Я вот, даже будучи нотариусом, ни за что не взялся бы.

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Здравствуйте, fk0, Вы писали:

fk0>>Что рядом не сидит нотариуса, который заверит, что в Developer Tools (или при записи видео) не было внесено ничего лишнего.

ЕМ>Вы смогли бы найти такого нотариуса? Я вот, даже будучи нотариусом, ни за что не взялся бы.

А какой тогда в этих картинках смысл?

Здравствуйте, fk0, Вы писали:

fk0> А какой тогда в этих картинках смысл?

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