从 SPA 捕获或保存动态页面的当前状态（HTML 元素）
[英]Capture or save a current state (HTML elements) of a dynamic page from a SPA
问题描述
It's possible to retrieve current state from a SPA (made on frameworks like Angular, React, etc)?
是否可以从SPA中检索当前状态（在 Angular、React 等框架上创建）？
By current sate I meant a snapshot/save/export of all current HTML elements, as well styles/images and the data being shown at the moment?当前状态是指所有当前 HTML 元素的快照/保存/导出，以及当前显示的样式/图像和数据？ So can be [statically] consumed afterwards with a browser and file:// ?那么之后可以使用浏览器和file:// [静态地] 消费吗？
Example:例子：
<html>
<head />
<body>
<h1>Welcome, <span ng-model="userController.username">John Doe</span></h1>
<!-- etc -->
</body>
</html>
Being the John Doe the current data shown by that controller.作为John Doe ，该控制器显示的当前数据。
As I tried, Save As... on browsers does not work.正如我所尝试的，浏览器上的Save As...不起作用。 Save the HTML with CSS but full of tags {{variableName}} .使用 CSS 保存 HTML，但包含标签{{variableName}} 。 And I assume that depending on the SPA was developed not even saves the desired page, instead saves the master/root/main page of the SPA.而且我假设根据 SPA 的开发甚至不保存所需的页面，而是保存 SPA 的主/根/主页。
There are other tools HTTrack Website Copier but from the usage I had on past this works best for static pages, I think.还有其他工具HTTrack Website Copier但从我过去的使用情况来看，我认为这最适合静态页面。
Any suggestion of tools, browser extensions or even techniques that allow me to develop the tool or extension to achieve this?有什么工具、浏览器扩展甚至技术可以让我开发工具或扩展来实现这一目标吗？
3 个解决方案
解决方案1
1 2019-10-16 11:56:14
The "save as" functionality saves the source code (will save a blank page for a SPA). “另存为”功能保存源代码（将为 SPA 保存空白页）。
I think your best option is to use the following command copy(document.documentElement.innerHTML) and then paste the code into an empty HTML file.我认为您最好的选择是使用以下命令copy(document.documentElement.innerHTML)然后将代码粘贴到一个空的 HTML 文件中。
The problem is that all of the external resources (loaded via src attribute) won't be embedded so you have to do the job yourself with a script before using the copy command.问题是所有外部资源（通过src属性加载）都不会被嵌入，因此您必须在使用copy命令之前使用脚本自己完成这项工作。 Use const documentClone = document.documentElement.cloneNode(true);使用const documentClone = document.documentElement.cloneNode(true); and then:接着：
解决方案2
0 2019-10-11 10:18:53
document.body.parentNode.innerHTML should do the trick, then (using code from another answer ) you may download directly the string as file. document.body.parentNode.innerHTML 应该可以解决问题，然后（使用来自另一个答案的代码）您可以直接将字符串下载为文件。
Here is a working snippet:这是一个工作片段：
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();
解决方案3
0 2022-05-29 08:56:56
As others mentioned "Save As" does not always produce desirable result.正如其他人提到的，“另存为”并不总能产生理想的结果。 In my case it always modified the data to some extent or saved no data at all due to app being a SPA..就我而言，由于应用程序是 SPA，它总是在一定程度上修改数据或根本不保存任何数据。
so I came up with this solution based on multiple sources所以我想出了这个基于多个来源的解决方案
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();
it uses the browser API to prompt user with "save as" dialog and even sets the default filename.它使用浏览器 API 以“另存为”对话框提示用户，甚至设置默认文件名。 You could modify it accordingly.你可以相应地修改它。
paste it into a console window.将其粘贴到控制台窗口中。 Or alternatively you could probably install some kind of Chrome extension and put the script in there for easy access.或者，您也可以安装某种 Chrome 扩展程序并将脚本放在那里以便于访问。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.