Question

我有一个使用React和materialize-css的单页Web应用程序，我想将其导出为静态HTML和CSS，以便可以轻松编辑HTML以进行原型设计。是否可以至少导出当前状态的快照？

我试过＆＃34;保存页面＆＃34;在Firefox和Chrome中，但它没有提供良好的效果。

Answer 1

可能不理想，但您可以将整个页面存储为变量并下载。在页面加载后在浏览器控制台中运行：

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();

Answer 2

ReactDOMServer模块包含一个将React应用程序呈现为静态HTML的功能 - 它设计用于服务器，但我认为没有什么可以阻止你在浏览器中使用它（不要虽然在生产中这样做！）

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

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

Answer 3

请遵循以下步骤：-

1。。在浏览器中，进入了开发人员工具，

2。。选择 Inspector（firefox）/ Elements（chrome），

3。，然后选择 HTML 标签，右键单击它，

4。。然后点击编辑为HTML 。

现在，您可以复制所有代码并保存。在保留文档的颜色和形状的同时，您将错过图片。祝好运！：）

Answer 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();

Answer 5

您可以构建代码并将其托管在github.io上。 following tutorial将帮助您实现这一目标。然后，您可以在gh-pages分支中使用生成的代码作为导出的HTML

Answer 6

我以前这样做过，但被卡住了，似乎在任何地方都找不到文档。我的场景是我有一个 react js SPA，需要创建一个静态构建以在没有服务器的情况下运行（通过使用静态文档存储库的组织 SharePoint）。

最后很简单，运行

npm run build

在您的项目目录中，它将在“build”文件夹中创建静态构建，您可以在需要的任何地方转储。参考：https://create-react-app.dev/docs/production-build/

是否可以将React单页网站导出为HTML？

6 个答案: