11

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

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

4

6 回答 6

3

请按照以下步骤操作：-

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

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

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

4.然后点击Edit as HTML。

现在您可以复制所有代码并保存。虽然文档的颜色和形状仍然存在，但您会错过图片。祝你好运 ！:)

于 2018-11-21T14:05:23.780 回答
2

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

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

document.body.innerHTML = ReactDOMServer.renderToStaticMarkup(App);
于 2017-05-05T10:18:37.770 回答
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();
于 2017-05-05T10:05:59.613 回答
1 
  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();
于 2019-05-24T05:55:14.883 回答
0

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

于 2019-09-18T08:02:07.187 回答
-2

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

最后很简单，运行

npm run build

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

于 2021-04-07T13:49:42.023 回答