Как сохранить html-страницы в виде одного файла?

Я хочу иметь возможность сохранять/архивировать HTML-страницы в виде одного файла (без этих надоедливых внешних папок).

Я хочу, чтобы результирующий файл содержал все стили, изображения и ссылки (видео и Flash тоже были бы хороши, но не так важны).

Я хочу, чтобы полученный файл был доступен для поиска и редактировался.

Microsoft MHT является одним из таких инструментов, но, к сожалению, он не доступен для поиска под Linux. MHT хорош, но я не хочу быть заблокированным под одной операционной системой или одной компанией. Что было бы хорошей альтернативой - или, может быть, есть совсем другое решение, о котором я не думал?

Заранее благодарим за ваши предложения!

Ответы

Ответ 2

Просмотр и создание файлов MHTML в текущих версиях Google Chrome поддерживается путем переключения опции "Сохранить страницу как MHTML" на странице хром://.

введите хром://флаги в поле URL-адреса

Однако включение этого экспериментального параметра отключает сохранение страниц в виде файлов HTML или HTML Complete. На странице chrome://flags:

Ответ 3

Расширение SingleFile Chrome является хорошим решением.

Я также написал свой собственный инструмент Python для решения этой проблемы, который я бы рекомендовал попробовать: https://github.com/zTrix/webpage2html

Ответ 4

Продолжая ответ zTrix, я бы предложил избегать расширения Chrome (которое вообще не работало для меня) и вместо этого использовало один из следующих вариантов:

  • Node.js: remy inliner
    • Простота установки с помощью npm
    • Множество опций, включая флаги для отключения мини-кодирования/сжатия, сохранения внешних изображений, пропусков видео и т.д.
    • Предостережение: (22 сентября 2017 года) не удается сохранить стиль и функциональность JavaScript при компиляции Slate builds. Это не повлияет на большинство людей напрямую, но это означает, что у Inliner, вероятно, будут проблемы с другими страницами. См. этот вопрос
    • Предостережение: нет параметров "оставить вещи в покое": либо минимизирует/убирает CSS/JS, либо украшает, но не будет просто вставлять исходный исходный код в HTML.
  • Python 2: zTrix webpage2html
    • Более консервативный, чем inliner; хорошо работает для большинства случаев.
    • zTrix исправил ошибку (что также похоже на Inliner), которая обеспечивает функциональность JavaScript/CSS при компиляции Slate builds. См. этот вопрос. (обновлено 29 сентября 2017 года).
    • Может быть преобразован в Python 3 относительно безболезненно
    • Предостережение: невозможно обрабатывать CSS @import

Ответ 5

Поместите всю свою страницу в поле DIV и используйте этот код следующим образом:

ПРИМЕЧАНИЕ.. не помещает JavaScript выше причины DIV, тогда он не будет работать. JavaScript должен находиться под div, чтобы заставить его работать.

Пример:

<div id="content">
    <h1>Hello world</h1>
    <i>Hi everybody</i>
</div>
<button class="download">Download</button>


<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
    $('.download').on('click', function(){
       $('<a />').attr({
              download: 'export.html', 
              href: "data:text/html," + $('#content').html() 
       })[0].click()
    });
</script>

Ответ 6

Обычно можно создать один HTML файл, содержащий все его общие дочерние файлы (css, jpg, js, svg,...)
Вы должны переписать HTML файл, заменив значение атрибутов " src ", функции " url() " и вставив HTML-тег, такой как " <script></script> " для файлов JavaScript, " <style></style> " для CSS файлы и " <svg></svg> " для изображения SVG.

Например, файл изображения GIF в CSS, вызываемый функцией " url() ".

  1. скачать изображение с его URL.
  2. закодировать это изображение в Base64.
  3. заменить " url('https://en.wikipedia.org/wiki/File:TPB_Magnet_Icon.gif') " на " url('data:image/gif;base64,R0lGODlhDAAMALMPAOXl5ewvErW1tebm5oocDkVFRePj47a2ts0WAOTk5MwVAIkcDesuEs0VAEZGRv///yH5BAEAAA8ALAAAAAAMAAwAAARB8MnnqpuzroZYzQvSNMroUeFIjornbK1mVkRzUgQSyPfbFi/dBRdzCAyJoTFhcBQOiYHyAABUDsiCxAFNWj6UbwQAOw') " с GIF-изображение в кодировке Base64 с префиксом " data:image/gif;base64, "

Вы можете сделать то же самое для значения атрибута " src ". Это решение может быть использовано для других двоичных файлов. Вы должны адаптировать правильный префикс " data " к соответствующему закодированному объекту.