Можно ли экспортировать один веб-сайт в качестве HTML?

У меня есть одностраничное веб-приложение с использованием React и materialize-css, и я хотел бы экспортировать его как статический HTML и CSS, чтобы можно было легко редактировать HTML для прототипирования. Возможно ли экспортировать хотя бы моментальный снимок текущего состояния?

Я попробовал "сохранить страницу" в Firefox и Chrome, но это не дает хороших результатов.

Ответ 1

Выполните следующие шаги: -

1. В браузер попал в инструменты разработчика,

2. выберите Инспектор (Firefox)/Элементы (хром),

3. затем выберите тег HTML, щелкните по нему правой кнопкой мыши,

4. затем нажмите Редактировать как HTML.

Теперь вы можете скопировать весь код и сохранить его. Пока цвет и форма документа остаются, вы будете скучать по фотографиям. Удачи ! :)

Ответ 2

Вероятно, это не идеальный вариант, но вы можете сохранить всю страницу как переменную и загрузить ее. Запустите это в консоли браузера после загрузки страницы:

var pageHTML = document.documentElement.outerHTML;

var tempEl = document.createElement('a');

tempEl.href = 'data:attachment/text,' + encodeURI(pageHTML);
tempEl.target = '_blank';
tempEl.download = 'thispage.html';
tempEl.click();

Ответ 3

Модуль ReactDOMServer содержит функцию для рендеринга приложения React для статического HTML - он предназначен для использования на сервере, но я не думаю, что вам что-то не мешает вам использовать его в браузере (не делайте этого в процессе производства!)

import ReactDOMServer from "react-dom/server";
import App from "./yourComponent";

document.body.innerHTML = ReactDOMServer.renderToStaticMarkup(App);

Ответ 4

  var pageHTML = window.document.getElementById('divToPDF').innerHTML;
  let data = new Blob([pageHTML], {type: 'data:attachment/text,'});
  let csvURL = window.URL.createObjectURL(data);
  let tempLink = document.createElement('a');
  tempLink.href = csvURL;
  tempLink.setAttribute('download', 'Graph.html');
  tempLink.click();

Ответ 5

Вы можете создать свой код и разместить его на github.io. следующий урок поможет вам достичь этого. Затем вы можете использовать сгенерированный код в ветке gh-pages в качестве экспортируемого HTML