React单页网站可以导出为HTML吗？

Question

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

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

Answer 1

请按照以下步骤操作：-

1. 在浏览器中，进入开发者工具，

2.选择检查器(firefox)/元素(chrome),

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

4. 然后单击 编辑为 HTML。

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

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

Answer 3

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

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

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

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 上。 以下教程将帮助您实现这一目标。然后，您可以使用 gh-pages 分支中生成的代码作为导出的 HTML

Answer 6

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

最后很简单，运行

npm run build 在您的项目目录中，它将在“build”文件夹中创建静态构建，以便您在需要的地方转储。 参考：

https://create-react-app.dev/docs/product-build/

Answer 7

这是我在 SW 上找到的第一个线程..所以我认为从另一个线程复制我自己的答案是合适的：

https://stackoverflow.com/a/72422258/1215913

async function saveToFile() {
    const handle = await showSaveFilePicker({
        suggestedName: 'index.html',
        types: [{
              description: 'HTML',
              accept: {'text/html': ['.html']},
          }]
    });
    const writable = await handle.createWritable();
    await writable.write(document.body.parentNode.innerHTML);
    writable.close();
}; saveToFile();

有关更多信息，请查看来源答案