Question

是否可以使用Javascript在本地保存HTML文件？例如，我想保存此HTML代码，该代码使用库mxGraph制作图形。是否有一种方法可以通过本地保存此文件的方式，例如，调用保存工作的Javascript函数的保存按钮？

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

是的，应该可以，

看看这个例子：http://jsfiddle.net/wared/fezc6tnt/

此人正在编写要打印的HTML的地方，您可以使用

document.querySelector("html").innerHTML

获取页面的所有HTML。

一旦您拥有一个将整个文档包含为字符串的变量-我们可以使用以下函数下载它：

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);
}

请注意，这是来自外部来源的复制粘贴，以显示如何轻松下载文本文件。

Answer 2

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

使用Javascript保存HTML文件的方法

2 个答案: