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

【问题标题】：Is it possible to export React single page website as HTML?是否可以将 React 单页网站导出为 HTML？
【发布时间】：2017-10-03 17:48:50
【问题描述】：

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

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

【问题讨论】：

标签： html css reactjs materialize mockups

【解决方案1】：

按照以下步骤操作：-

1.在brouser中，进入开发者工具，

2.选择Inspector(firefox)/Elements(chrome)，

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

【讨论】：

这给了我与 Firefox 中的“保存页面”类似的结果，它的样式格式更好。不幸的是，它没有正确显示图标。
您可能需要检查您的所有资产是否都已加载到新的静态页面上。

【解决方案3】：

ReactDOMServer 模块包含一个用于将 React 应用程序渲染为静态 HTML 的函数——它是为在服务器上使用而设计的，但我认为没有什么可以阻止你在浏览器中使用它（不要这样做正在生产中！）

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

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

【讨论】：

我不知道如何使用它。除此之外，这个解决方案是否会提供 CSS 样式和图标（它会比 Firefox 做得更好）吗？

【解决方案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 上。 following tutorial 将帮助您实现这一目标。然后，您可以将 gh-pages 分支中生成的代码用作导出的 HTML

【讨论】：

如果我得到关于如何改进我的答案的评论，而不是仅仅投反对票，我会很高兴。
我认为这种方法没有任何问题，它简单、免费且有效......

【解决方案6】：

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

最后还是很简单的，运行

npm run build

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

【讨论】：

问题是关于在没有 JS 的情况下提取 HTML+CSS。 npm run build 只会构建普通的 webapp 包，一旦被浏览器加载，它将呈现 HTML。这是动态的，还需要存根 API，以便为应用程序提供数据。这仍然不是我想要的。