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

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

---

我在Firefox和Chrome中尝试了“保存页面”，但效果不佳。

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

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

该模块包含一个用于将React应用程序呈现为静态HTML的函数-它是为在服务器上使用而设计的，但我认为没有任何东西可以阻止您在浏览器中使用它（不过不要在生产环境中使用！）

---

请按照以下步骤操作：-

1.在布鲁泽，进入开发工具

2.选择检查器（firefox）/元素（chrome）

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

4.然后单击编辑为HTML

现在您可以复制所有代码并保存它。当文档的颜色和形状保持不变时，您将错过图片。

---

祝你好运！：）

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

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

最后很简单，跑吧

npm run build

在项目目录中，它将在“build”文件夹中创建静态构建，以便在需要时转储。

---

参考资料：

这给了我与Firefox中的“保存页面”类似的结果，它的格式更好。不幸的是，它没有正确显示图标。您可能需要检查您的所有资产是否都加载到新的静态页面上。我不知道如何使用它。除此之外，这个解决方案会提供CSS样式和图标（它会比Firefox做得更好吗）？如果我能得到关于如何改进我的答案的评论，而不是仅仅投反对票，我会很高兴。我认为这种方法没有错，它简单、免费、有效……问题是关于在没有JS的情况下提取HTML+CSS

npm run build

将只构建普通的webapp捆绑包，该捆绑包将在浏览器加载后呈现HTML。这是动态的，还需要存根API，以便向应用程序提供数据。但这并不是我想要的。

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

npm run build