如何编写 saveTable 函数？答案

【问题标题】：How to write the saveTable function?如何编写 saveTable 函数？
【发布时间】：2016-10-22 08:37:49
【问题描述】：

function createTable(){
    var _table = document.getElementById("test");
    var newRow = _table.insertRow(1);
    var cell0 = newRow.insertCell(0);
    var cell1 = newRow.insertCell(1);
    cell0.innerHTML = "x";
    cell1.innerHTML = 60;
    }

function saveTable(){
   document.execCommand("saveas",,"/tmp/test.html");
    }

<p>to create my table</p>
<input type="button" value="to create new table" onclick="createTable()" />
<input type="button" value="to save table as /tmp/test.html" oncilck="saveTable()" />
<table id="test" bodrder=1px>
<tr>
    <td>f1</td>
    <td>f2</td>
</tr>
</table>

当函数createTable创建表时，我想得到一个文件/tmp/test.html，其内容如下

<table id="test">
<tr>
<td>f1</td>
<td>f2</td>
</tr>
<tr>
<td>x</td>
<td>60</td>
</tr>
</table>

如何实现我的 saveTable 功能来完成这项工作？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以按照此处的说明使用 blob：

https://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/

这里：

How to export source content within div to text/html file

<!DOCTYPE html>

<html>
<head>

 
  <title></title>
</head>

<body>
  <p>to create my table</p>

  <form>
    <input type="button" value="to create new table" onclick="createTable()"> <input type="button" value=
    "to save table as /tmp/test.html" onclick="saveTable()">
  </form>

  <table id="test" bodrder="1px">
    <tr>
      <td>f1</td>

      <td>f2</td>
    </tr>
  </table>
  
  
   <script>
function createTable() {
	var _table = document.getElementById("test");
	var newRow = _table.insertRow(1);
	var cell0 = newRow.insertCell(0);
	var cell1 = newRow.insertCell(1);
	cell0.innerHTML = "x";
	cell1.innerHTML = 60;
}

function saveTable() {
	var textToSave = document.getElementById("test").outerHTML;
	var textToSaveAsBlob = new Blob([textToSave], {
			type : "text/html"
		});
	var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
	var fileNameToSaveAs = "/tmp/test.html";

	var downloadLink = document.createElement("a");
	downloadLink.download = fileNameToSaveAs;
	downloadLink.innerHTML = "Download File";
	downloadLink.href = textToSaveAsURL;
	downloadLink.onclick = destroyClickedElement;
	downloadLink.style.display = "none";
	document.body.appendChild(downloadLink);

	downloadLink.click();
}

function destroyClickedElement(event) {
	document.body.removeChild(event.target);
}

  </script>

  
</body>
</html>

【讨论】：

还有两个问题。
1.保存文件的位置
我想要的是/tmp/test.html，我得到的是/Downloads/_tmp_test.html
2.content in /Downloads/_tmp_test.html
/Downloads/_tmp_test.html 中只有一个字，undefined，没有几行 html。