Way to save HTML file using Javascript

Question

Is there a way to save HTML file locally using Javascript? For example I'd like to save this HTML code that makes a graph using the library mxGraph. Is there a way to save this file locally with, for example, a save button that calls a Javascript function which does the work?

<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
    mxBasePath = '/mxgraph/javascript/src';
</script>

<!-- Loads and initializes the library -->
<script type="text/javascript" src="/mxgraph/javascript/src/js/mxClient.js"></script>

<!-- Example code -->
<script type="text/javascript">
    // Program starts here. Creates a sample graph in the
    // DOM node with the specified ID. This function is invoked
    // from the onLoad event handler of the document (see below).
    function main(container)
    {
        // Checks if the browser is supported
        if (!mxClient.isBrowserSupported())
        {
            // Displays an error message if the browser is not supported.
            mxUtils.error('Browser is not supported!', 200, false);
        }
        else
        {
            // Disables the built-in context menu
            mxEvent.disableContextMenu(container);

            // Creates the graph inside the given container
            var graph = new mxGraph(container);
            // Enables rubberband selection
            new mxRubberband(graph);

            // Gets the default parent for inserting new cells. This
            // is normally the first child of the root (ie. layer 0).
            var parent = graph.getDefaultParent();

            // Adds cells to the model in a single step
            graph.getModel().beginUpdate();
            try
            {
                var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
                var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
                var e1 = graph.insertEdge(parent, null, '', v1, v2);
            }
            finally
            {
                // Updates the display
                graph.getModel().endUpdate();
            }


        }
    };
</script>

<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
    style="overflow:hidden;width:1000px;height:400px;">
</div>

Answer 1

Yes it should be possible,

take a look at this example: http://jsfiddle.net/wared/fezc6tnt/

Where this person is writing a piece of HTML to print out, you can do that with

document.querySelector("html").innerHTML

to get all the HTML of an page.

Once you have a variable containing the entire document as a string - we can download it with the following function:

function download(filename, text) {
 var element = document.createElement('a');
 element.setAttribute('href', 'data:text/plain;charset=utf-8,' + 
 encodeURIComponent(text));
 element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

• note this was a copy paste from an external source to show how to easily download a text file.