Как сохранить содержимое DOM, чтобы потом красиво отTeXить этот текст?

[Was-Ja]

Добрый день,

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

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

Я хочу превратить это в обычный html без вложенных домов, чтобы стили все раскрылись и все, что не нужно, удалилось или встроилось,
то есть было куча вложенных домов, а остались только команды <b>, <i>, <ul>, <br> и никаких вложеннных домов.

2. похожая задача с DOM, но свойства могут быть сложными, и я хочу сохранить картинку (jpg, png, eps или что можно), чтобы потом ее сохранить на диск. PrintScreen - делать ломает, картинок много и каждую потом надо обрезать точно по размеру DOM, мне нужна автоматизация этой работы.

Пожалуйста, посоветуйте, как и первый и второй вариант реализовать, я хочу содержимое потом в LaTeX перевести и получить красивую документацию.

Спасибо!

[Aetae]

Для первого использовать какой-нить WYSIWYG редактор с настроенным списком разрешённых тегов, например CKEditor.
Для второго использовать html2canvas.

В первом случае скорее всего есть либы которые сделают это без лишнего кода самого редактора, но надо гуглить.
Во втором случае поддерживаемых фич html2canvas может не хватить и придётся писать своё расширение, которое будет делать настоящие скриншоты(captureVisibleTab), а не эмуляцию.

[Was-Ja]

Спасибо большое, Aetae,

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

Со вторым случаем, по Вашему совету набрел на https://developer.mozilla.org/en-US/...tureVisibleTab
которую вроде бы очень заманчиво использовать... Потыкался, но не смог понять как включить WebExtensions API в моем файерфоксе (91). Пишут, что надо ставить через https://addons.mozilla.org/en-US/firefox/ но WebExtensions там нет, вернее поиском не находится.

Скажите, пожалуйста, а как поставить эти WebExtensions?

Спасибо!

[Aetae]

WebExtensions - это универсальный формат расширений. Это API нельзя включить, оно действует исключительно в расширениях.
Вы можете написать своё расширение ля браузера под задачу, но это "немного" неудобно, потому я и не предложил это первым вариантом.
Вот тут я привёл базовое расширение(для FF тоже подойдёт).

[Was-Ja]

Спасибо большое, Aetae, что помогаете!

Эти дни интенсивно пробовал, но так и не продвинулся в автоматической такой генерации. Похоже придется самому писать парсер, так как готовые парсеры не способны понять настройки в стилях, а это приводит к тому, что слетает большая часть форматирования и после копирования в WYSIWYG и дальнейшего преобразования, например, с помощью gnuhtml2latex все идет юзом.

С WebExtensions пока еще не осилил, но очень стараюсь, но html2canvas довольно сильно искажает то, что имеется, а классический PrintScreen дает слишком большую зернистость, которая видна при качественной печати. Очень надеюсь, что смогу с WebExtensions разобраться, и, подняв по максимому разрешение, получу адекватные картинки.

Спасибо!

[Was-Ja]

Оказалось, что написать самому под свой стиль парсер html -> latex получилось проще, чем найти в сети что-то, что бы работало. С картинками пока еще не разобрался, но надеюсь с классными советами Aetae таки осилю.

[Aetae]

В общем прилагаю расширение-пример, работает только в firefox.

Распаковываете архив в какую-нить папку.
Меню - Дополнения и темы - Клик на шестерёнку - Отладка дополнений - Загрузить временно дополнение - manifest.json.

Далее переходим на google.ru открываем консоль и там будет доступна функция capture(rectOrElemenent, callback), в callback прилетит data:URI картинки, rectOrElemenent - можно передать элемент или rect вида {x, y, width, height}.

Например:

capture(document.body, data => document.body.insertAdjacentHTML('beforeend', `
<div ondblclick="remove()" style="
  position: fixed; 
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  z-index: 5000;
  display: inline-block; 
  font: 0; 
  boerder: 2px solid #fff
">
 <img src="${data}" style="max-width: 80vw; max-height: 80vh"/>
</div>
`))