从SPA捕获或保存动态页面的当前状态(HTML元素)

Pau*_*ira 6 javascript single-page-application angular

是否可以从SPA(在Angular,React等框架上完成)中检索当前状态?

当前状态是指所有当前HTML元素的快照/保存/导出,以及样式/图像和当前显示的数据?这样可以在以后[静态]使用浏览器使用file://吗?

例:

<html>
    <head />
    <body>
        <h1>Welcome, <span ng-model="userController.username">John Doe</span></h1>
        <!-- etc -->
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

作为该John Doe控制器显示的当前数据。

如我所试,Save As...在浏览器上不起作用。用CSS保存HTML但保留完整的标签{{variableName}}。而且我假设根据SPA的开发情况,甚至不会保存所需的页面,而是保存SPA的主/根/主页。

还有其他工具HTTrack Website Copier,但是根据我过去的使用情况,我认为它最适合静态页面。

关于工具,浏览器扩展或什至可以使我开发工具或扩展来实现此目标的技术的任何建议?

Dan*_*dra 0

document.body.parentNode.innerHTML 应该可以解决问题,然后(使用另一个答案中的代码)您可以直接将字符串下载为文件。

这是一个工作片段:

var pageSource = document.body.parentNode.innerHTML;
var downloadLink = document.createElement('a');
downloadLink.href = "data:text/html," + unescape(encodeURI( escape(pageSource) ));
downloadLink.target = '_blank';
downloadLink.download = 'page.html';
downloadLink.click();
Run Code Online (Sandbox Code Playgroud)