Єдиний файл HTML + CSS + JS +


8

Чи існує формат файлу, який інтегрує весь вміст HTML в один файл?

Замість doc, docx, odt чи pdf, я хочу використовувати документи HTML5 для створення свого вмісту. Але це створює проблему, коли я хочу надсилати HTML-файли, наприклад, електронною поштою; Мені доведеться скопіювати його, а потім долучити його до електронного листа. Звичайно, є .lit та .chm, але з очевидних причин це не шлях. Крім того, можна вбудувати код JavaScript і CSS у файли HTML. У цього є і недолік: зображення все ще виключаються, і вбудовування всіх зовнішніх файлів CSS та Javascript в один HTML-файл є громіздким. Інструменти можуть це автоматизувати, але тоді проблема із зображенням все ще існує.

Найважливішою мотивацією до використання HTML у форматі pdf / doc / docx / odt є те, що HTML не призначений для друку, тоді як pdf / doc / docx / odt всі є (і таким чином не оптимізовані для перегляду екрана). Крім того, HTML - це повністю прийнятий і відкритий стандарт, який не можна сказати про названі формати (odt є відкритим, але не широко прийнятим).

Відповіді:


7

Включити все у звичайний HTML-файл - це шлях. Ви коли-небудь бачили TiddlyWiki ? Я думаю, що я бачив це як "додаток для однієї сторінки" - все вбудовано в один HTML-файл, тому він функціонує як (ну, майже) окремий фрагмент програмного забезпечення. Я його не використовую, але думаю, що технічно це дуже вражає.

Зображення можуть бути включені вбудовано, використовуючи кодування base64 за допомогою URI даних. Але підтримка в Internet Explorer 8 не є повною (існує обмеження розміру IIRC), і підтримка повністю відсутня у старих версіях IE. Більшість інших сучасних браузерів мають хорошу підтримку.

Зауважте, що це, як правило, збільшить розмір зображення приблизно на третину (адже ви "використовуєте" лише 6 з кожні 8 біт на байт, тому вам доведеться використовувати ще третину байтів, щоб пристосувати цей проміжок).

Наприклад, ви отримуєте щось подібне:

<img src="data:image/png;base64,<BASE64 STRING>" />

Або це:

.someClass
{
    background-image:url(data:image/png;base64,<BASE64 STRING>");
}

Ви також можете прочитати статтю Вікіпедії про URI даних , у ній є коментарі щодо підтримки браузера та деякі приклади використання.


Чи є інструменти (дорогоцінні камені, яйця, пакети вузлів тощо), які обробляють перетворення і включають? Чи є інструмент, який буде вбудовувати JS та CSS там, де він бачить src="..."або href="..."атрибут? А потім конвертувати зображення в base64 і замінити <img src="..."з <img src="data:image/..."?
Сукіма

Я поняття не маю, я не намагався щось подібне обернути раніше, щоб коли-небудь виникнути потреба шукати.
DMA57361

3

Я думаю, що формат MHTML (MIME HTML) (розширення файлу .MHT) - це, мабуть, те, про що ви хочете. Це вбудовує все в один файл (подібно до електронної пошти HTML). Зображення тощо вбудовуються в кодування base64.

Підтримка браузера є розумною. IE і Opera можуть зберігати та переглядати файли MHT. У IE ви просто "Зберегти як ..." і виберіть "Веб-архів, один файл (* mht)". Однак для Firefox та Chrome потрібні розширення для браузера.

Особисто я б, мабуть, завантажував вміст HTML на веб-сайт (можливо, захищений паролем) і просто поширював посилання. Файли MHT не є зручними для редагування користувачами, тому потрібна регенерація під час розповсюдження. Після того, як все це об'єднано у файл MHT, він все ще доступний як HTML?

PDF є доступним. У нього є власні можливості читання на екрані. Не знаєте, як він обробляє зображення, хоча - якщо ви можете створити це за допомогою певного інструменту?


Крім технічних вимог, існує також організаційна вимога не працювати з будь-яким власницьким стандартом (pdf може бути відкритим, він все ще є власником). Я все-таки загляну в mhtml.
user45971

Див. Tools.ietf.org/html/rfc2557 . Це відкритий стандарт. Мене здивувало, що IE має кращу підтримку, ніж Firefox (останній вважає за краще власний формат), але там у вас є. Напевно, є краща підтримка інструментів для формату pdf чи html +.
Іїрідайн
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.