保存使用 ReactJS 生成的静态 HTML 页面答案

【问题标题】：Saving static HTML page generated with ReactJS保存使用 ReactJS 生成的静态 HTML 页面
【发布时间】：2021-02-22 20:46:47
【问题描述】：

背景：

我需要允许用户为各种产品创建网页，每个页面都具有标准的整体外观。所以基本上，我将有一个模板，根据输入数据，我需要为每个产品生成 HTML 页面。输入数据将通过 Web 表单提交，随后数据应与模板合并以生成输出。

我最初考虑使用纯粹的模板方法，例如 Nunjucks，但后来因为我有使用后者的经验而转向 ReactJS。

问题：

一旦我显示输出页面（通过将用户输入添加到带有占位符的模板文件），我将在浏览器中显示所需的输出页面。但是我现在如何获取这个特定页面的 HTML 代码呢？

当我试图查看页面的源代码时，我看到'public/index.html'的内容声明：

这个 HTML 文件是一个模板。如果直接在浏览器中打开，会看到一个空白页面。

预期，当我尝试通过浏览器保存（另存为...）html页面时也会发生同样的情况。我明白为什么会发生上述情况。

但我找不到满足我要求的解决方案。谁能告诉我如何下载/保存浏览器上显示的输出页面的静态源代码。

我已经阅读了可能的解决方案，例如安装“React/Redux 开发扩展”等...但这些对于外部用户（不能期望他们安装这些扩展来使用我的工具）作为解决方案不起作用。我需要一种在生产环境中执行此操作的方法。

附言阅读了我的任务的“背景”信息后，如果您能想到任何更好的方法来解决这个问题，请告诉我。

编辑备注： 我的应用程序目前实际上只是一个页面，它通过表单接受用户数据并显示输出（在全屏对话框中）。我不希望在网站上“发布”这些输出页面，这些页面只是为了保存/下载供内部使用。因此，只需能够在浏览器上获取显示视图/页面的“源代码”并将其保存到文件中就可以解决我的问题。但我不确定是否有办法做到这一点？

【问题讨论】：

你是用 npx create-react-app 开始这个项目的吗？还是您将 react 安装到现有版本中？
是的，我从 npx create-react-app app_name 开始

标签： html reactjs

【解决方案1】：

建议您为静态网站使用知名网站生成器，例如 Gatsby 或 Next，因为“npx create-react-app my-app”适用于单页应用程序。（参考：https://reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains）

【讨论】：

感谢您的链接和领导马里奥。我现在正在浏览它们，尤其是盖茨比，但在开始之前我有一个问题.....我的应用程序实际上只是一个页面，它通过表单接受使用数据并显示输出（在全屏对话框中） .我不希望在网站上“发布”这些输出页面，这些页面只是为了保存/下载供内部使用。这在“create-react-app”中是否可行，还是建议使用 Gatsby/Next？想要确认它是否对我的目的来说不是矫枉过正。再次感谢。
我仔细研究了 Gatsby，我觉得它是为了预先生成静态 HTML 文件并将它们上传到服务器....也就是说它不能用于生成动态的 HTML 文件，用户可以在我的网页上以 Web 表单的形式输入数据，并将这些数据用于生成静态 HTML 文件。

【解决方案2】：

如果我的理解正确，您需要为每个用户生成一个新的页面链接。您的每个用户都有自己的链接 (http/https) 与他们的用户共享。

例如，调度工具将需要每个用户创建自己的“预订页面”，这是一个生成的链接（可以在您的域中 --> www.yourdomain.com/bookinguser1）。

您需要用户配置文件来存储每个用户的自定义页面、数据库等。如果您不舒服，我会使用类似电子商务工具的工具来为您完成。

【讨论】：

您好，感谢您的回复。我应该澄清这一点（现在已经编辑了我的帖子）。我的应用程序目前实际上只是一个页面，它通过表单接受用户数据并显示输出（在全屏对话框中）。我不希望在网站上“发布”这些输出页面，这些页面只是为了保存/下载供内部使用。因此，只需能够在浏览器上获取显示视图/页面的“源代码”并将其保存到文件中就可以解决我的问题。
在这种情况下，我认为您可以创建一个按钮来废弃页面源代码并允许用户下载它。如果你熟悉 Node，这里有一个简单的包：npmjs.com/package/website-scraper
感谢您的建议。我尝试了这种方法，但问题是由于它是单页应用程序，因此目标页面没有直接 URL，而是出现在按钮单击上。网络爬虫只能在目标 URL 的直接页面上工作。

【解决方案3】：

您可以打开调试器 (f12) 并转到“元素”

然后右键单击 HTML 标记并按编辑为 HTML

然后复制所有内容（ctrl + a）

【讨论】：

这样做的问题是它不会复制通过 JS 应用到 shadow dom 或 react 组件的生成样式。很有可能一旦他复制了该代码，它将丢失很多样式或其他重要代码，可能还有 Shadow Dom。
是的，但是作者的问题是他甚至无法通过他使用的方法来获得这个。也许这会对他有所帮助。肖恩斯他可以控制应用程序代码本身，他可以修复任何缺失的样式等。
感谢您的建议。问题是不能指望该工具的最终用户（页面创建者）使用这种方法。需要的是我的页面/工具，以根据用户输入充当独立的页面创建者。用户应该能够获得生成的输出的 HTML 页面/源代码。
因此，我需要找到一种方法（如果可能的话），允许用户下载/查看与单击按钮时屏幕上显示的内容相对应的 HTML 代码。
我明白了。那我想你只需要直接从js访问dom，动态生成一个HTML文件。像这样stackoverflow.com/a/64470124/788798