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>

Hi there! Welcome to stakoverflow! Here is a helpful page that will help you as you start to ask more questions on the site stackoverflow.com/help/how-to-ask — TheCrzyMan
– TheCrzyMan, Commented Sep 21, 2018 at 13:00

Rheijn · Accepted Answer · 2018-09-21 13:14:58Z

12

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.

edited Sep 21, 2018 at 13:14

answered Sep 21, 2018 at 13:02

Rheijn

3193 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eddie Fung · Accepted Answer · 2019-05-03 19:23:08Z

<html>

<script>
// This function will save the textbox content to a file...
//-------------------------------------------------------------------
function saveFile()
{  
    // get the textbox data...
    textToWrite = document.getElementById("mytext").value;
    // put the data in a Blob object...
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
    // create a hyperlink <a> element tag that will be automatically clicked below...
    var downloadLink = document.createElement("a");
    // set the file name...
    downloadLink.download = "fileName.xml";
    // set the <a> tag href as a URL to point to the Blob
    downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    // automaitcally click the <a> element to go to the URL to save the textFileAsBlob...
    downloadLink.click();
}
</script>

<body>

   <br/><br/>
   <input type=texarea id=mytext>

   <br/><br/>
      <h3>Click button to save the text box in a file</h3>
      <input type='button' onclick=saveFile() value='Save Text Box' /> 
      <br/><br/>

</body>
<html>

Collectives™ on Stack Overflow

Way to save HTML file using Javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related