Menu
It's possible to retrieve current state from a SPA (made on frameworks like Angular, React, etc)?
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?
So can be [statically] consumed afterwards with a browser and 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.
As I tried, Save As... on browsers does not work. Save the HTML with CSS but full of tags {{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.
There are other tools HTTrack Website Copier but from the usage I had on past this works best for static pages, I think.
Any suggestion of tools, browser extensions or even techniques that allow me to develop the tool or extension to achieve this?
904
The "save as" functionality saves the source code (will save a blank page for a 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.
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. Use const documentClone = document.documentElement.cloneNode(true); and then:
<style> tags and build a single inline <style> tag<script> tags?<img>, <video>, etc... fetch them and replace them with inline Data URLs
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
