3

I have a webapp that I want to save the HTML of to create a static version of a page I can send to someone. Obviously 'save as' won't work.

Is there a way to save the currently displayed DOM as HTML, even when it has been created by javascript?

Update with more information

Apparently it's not clear what I'm asking. I have an ember app. The index.html page contains:

<!DOCTYPE html>
<html lang="en">
  <body>
    <script>
      window.AppENV = {{ENV}};
      window.EmberENV = window.AppENV.EmberENV;
    </script>
    <script src="assets/vendor.js"></script>
    <script src="assets/app.js"></script>
    <script>
      window.App = require('app/app')['default'].create(AppENV.APP);
    </script>
  </body>
</html>

I also have a template like:

<ul>
{{#each thing in things}}
   <li>{{thing.title}}</li>
{{/each}}
</ul>

When I load this app in my browser, the underlying HTML will in the DOM will be something like this, and this is what I want to save directly:

<!DOCTYPE html>
<html lang="en">
  <body>
    <ul>
      <li>my thing 1</li>
      <li>my thing 2</li>
    </ul>
  </body>
</html>

So how can I save the HTML generated by my app as a static page like this? Using the browser's 'Save as' only saves the raw index.html. It doesn't traverse the DOM and dump the generated HTML which is what I want (at least it doesn't in chrome).

Nola Shiffer
  • 39
  • If the web app doesn't interact with a server, Save as should work. If it communicates with the server, there's no way to save it. – gronostaj Sep 17 '14 at 15:44
  • It doesn't communicate with a server, but displays data from localstorage. I basically just want to save whatever the browser's DOM is displaying, not the underlying HTML/JS that built it. – Nola Shiffer Sep 17 '14 at 15:46
  • 1
    You want to save ONLY html page without including other resources. did I understand correctly? – Amirreza Nasiri Sep 17 '14 at 16:35
  • Is this what you are looking for: http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side – krowe Sep 17 '14 at 16:43
  • @AmirrezaNasiri I have a page containing a header and a list of items which is all created by javascript. I want to save a static version of the page to send to a designer. I.e. What I want to send is the HTML that has been inserted into the DOM to create the page. – Nola Shiffer Sep 17 '14 at 21:12
  • 1
    @NolaShiffer After making the page, you can do a right-click on the page and select "Save as ..." then you SHOULD change "Save as type" to "webpage, HTML Only". try that. – Amirreza Nasiri Sep 17 '14 at 23:16
  • @AmirrezaNasiri See update above. – Nola Shiffer Sep 18 '14 at 07:34
  • So, you want a snapshot, at a time of your choosing? If a browser won't do it, we might recommend an app or browser plug-in on software recommendations Great question (+1) ! – Mawg says reinstate Monica Jan 06 '20 at 07:10
  • Why do you want this. For example, why does a screen shot not work – Dave Sep 06 '20 at 20:28

1 Answers1

-1

Chrome and Firefox will save a copy of the page as it's currently displayed (ie using the current DOM) with Ctrl+S / Save Page As... if you choose Web page, complete.

For info, if Web page, HTML only is selected, you get the initial HTML instead.

Try on this page for example.

lemonsqueeze
  • 1,320
  • 1
    That won't quite work if the page has JS code that changes the page dinamically, as the saved page will execute said JS code and overwrite whatever was originally displayed when the saving ocurred. – Haroldo_OK Oct 08 '19 at 11:53
  • @Haroldo_OK How does one then save without JS code (and all other files that seem to come with a dynamic webpage) - just a current snap shot? Thank you – Confounded Mar 21 '23 at 01:06
  • @Confounded one workaround would be to save the page like mentioned in the answer and them manually edit the saved HTML to remove the JS code. – Haroldo_OK Mar 24 '23 at 10:18