Как сохранить динамически измененный (byjquery) HTML DOM?

Question

У меня есть хороший генератор макетов, использующий динамические формы jquery, и функции пользовательского интерфейса jquery для изменения количества используемых элементов, их свойств CSS и т. Д. Все выглядит отлично, но есть одна проблема с представлением текущего результата.Я хотел бы сохранить сгенерированный HTML-DOM и как-то разобрать его (удалить скрытые элементы из дерева DOM и т. Д.).Любые идеи, как сохранить текущий (измененный) HTML + CSS?

Answer 1

Решение с использованием jquery:

Шаг 1:

преобразовать весь (модифицированный) HTML в строковое представление:

var html = $('html').clone();
var htmlString = html.html();

Шаг 2:

Base64 кодирует htmlString и помещает его в datauri внутри гиперссылки:

var datauri = "data:text/html;charset=utf-8;base64," + $base64.encode(htmlString);
$("body").append("<a href='" + datauri + "'>Save</a>");

Примечание. Я использую эту библиотеку для кодирования base64, указанного выше: http://hpyer.cn/codes/jquery-plugin-base64-encode-and-decode

Шаг 3:

Щелкните правой кнопкой мыши ссылку «Сохранить», динамически созданную выше, и выберите «Сохранить как» в контекстном меню браузера. Ваш измененный HTML-файл будет сохранен как новый HTML-документ в локальной файловой системе.

Я пробовал это раньше, и это работает. Надеюсь, это сработает и для вас, и для других. Это решение работает без какой-либо серверной технологии и не требует Flash, Java-апплетов, элементов управления Active-X, XPCOM или любой проприетарной клиентской технологии. Требуется только любой (современный) браузер, поддерживающий data-uris.

Answer 2

Есть другой способ, если вы используете хром.

1. Открыть «инструменты разработки» (trl + mayus + i на окнах)
2. Перейти на вкладку «элементы».Вы увидите актуальный (измененный) DOM
3. Найдите интересующий вас узел (возможно, HTML или BODY, но может быть любым), щелкните правой кнопкой мыши и выберите COPY AS HTML
4. Вставить в ваш любимый текстотредактируйте и сохраните.

Решение, предоставленное tsaixingwei, отлично работает на небольших DOM, но когда у вас большие документы, оно не будет работать.Я только что попробовал с документом, содержащим около 30 тыс. Строк, и мне пришлось использовать метод, который я только что объяснил.

Answer 3

В качестве первого шага вы можете использовать

var $alteredHtml = $('html').clone();
// use jQuery here to make alterations to the cloned html (parse it)

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