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).

9
  • 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, 2014 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. Sep 17, 2014 at 15:46
  • 1
    You want to save ONLY html page without including other resources. did I understand correctly? Sep 17, 2014 at 16:35
  • Is this what you are looking for: updates.html5rocks.com/2011/08/…
    – krowe
    Sep 17, 2014 at 16:43
  • 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. Sep 17, 2014 at 23:16

1 Answer 1

-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.

3
  • 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 8, 2019 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, 2023 at 1: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, 2023 at 10:18

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .