如何将NextJS页面下载为静态HTML文件



所以我用Next制作了这个网站,在一个页面上有一些图形(图形内容随着获取API而变化(和信息。我想在页面上添加一个按钮,当按下它时,它会将页面下载为HTML文件,并将所有JS和CSS包含在HTML文件中,而不是单独包含,有人知道如何解决这个问题吗。(图表内容应与下载时的内容相同(

(我之所以想这样做,是因为我想把这些文件分发给其他人,我想让他们在没有互联网连接的情况下阅读(

您无法真正下载React"页面",因为React中没有可下载的页面。

Next使这一过程更加复杂,因为它在服务器端渲染所有内容并重新水合客户端。如果您检查其中一个页面,您将看到Next用于数据的JSON块。查找__NEXT_DATA__脚本(通常在页面的页脚中(。

我认为你可以使用两种策略:

  • 在构建序列中对图形进行屏幕捕获,并将它们推送到AWS S3存储桶或类似的存储桶中(繁琐(
  • 当我遇到这样的需求时,我只是在图的下方以JSON下载的形式提供了图的数据,它充分满足了用例

如果您只是想下载资产并查看一下,那么解决方法可能是利用next/export包。这允许您运行yarn build并生成整个站点的静态导出。这应该包括您要查找的文件。

只是一些想法需要思考。

最新更新