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

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

Ответы

Ответ 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.

Ответ 2

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

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

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

Ответ 3

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

  • Откройте "средства разработки" (trl + mayus + я на окнах)
  • Перейдите на вкладку "элементы". Вы увидите фактическую (измененную) DOM
  • Найдите интересующий вас node (возможно, HTML или BODY, но может быть любым), щелкните правой кнопкой мыши и выберите COPY AS HTML
  • Вставьте в свой любимый текстовый редактор и сохраните.

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