Как преобразовать файл HMTL с папкой контента в автономном HTML файл

Question

Как преобразовать файл HTML с папкой содержимого в автономном HTML-файл, который можно просматривать в любом месте с его изображениями и т.д.

Как это можно сделать так, чтобы он также редактировался и остается автономным после редактирования.

Мне в основном нужно сделать документацию на основе HTML-файла, которая может быть просмотрена из любого места. К сожалению, он должен быть HTML, в противном случае я бы сделал PDF-файлы

Благодарности

Answer 1

Самый прямой путь, чтобы преобразовать все URLs активов в data: urls. (Есть онлайно coverters доступно, которые будут принимать предоставленный актив и производят data: URL из него.)

Возможно, более простой способ для преобразования изображений и шрифтов URLs в data: URLs, а вместо встраивания сценариев и CSS.

---

Edit: Возможно, интерес: inliner, утилита узел для выполнения такого рода вещи. «Включает вашу веб-страницу в один HTML-файл со всем встроенным». Также выполняет ряд минимизирующих оптимизаций.

Answer 2

Я не знаю точно, что вы предполагаете, но HTML никогда не должен был быть полностью автономным. Могут быть некоторые лазейки, которые позволяют это, в конце концов, но, насколько я знаю, нет готовых инструментов, которые делают это «преобразование». Это потребовало бы следующие вещи:

• Преобразования всех связанных таблиц стилей и скриптов встраивать таблицы стилей и скрипты. Это означает, что всякий раз, когда есть <script src="http://url.to/foo.js"></script>, вам нужно будет скачать foo.js и включить его как таковое: <script type="text/javascript"> [this is the content of foo.js] </script>. Что-то подобное относится к CSS и другим связанным исходным файлам.
• Загрузка всех связанных медиафайлов (изображения в основном, я полагаю), и преобразование их в blobs (служба, которая предоставляет вам базовый бит base64, который вы можете использовать в HTML-файле, - https://www.base64-image.de/). Это означает замену <img src="http://url.to/image.jpg" /> на <img src="data:image/png;base64,[converted image data goes here] />. Итак, там будет какой-то ручной труд, но это, вероятно, можно сделать (почти) полностью.

Возможно, есть способ выполнить то, что вы хотите сделать другим путем, но в чем именно причина вашего желания?