2016-10-22 72 views
0

如何編寫saveTable函數?

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功能來完成這項工作?

回答

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() { 
 
\t var _table = document.getElementById("test"); 
 
\t var newRow = _table.insertRow(1); 
 
\t var cell0 = newRow.insertCell(0); 
 
\t var cell1 = newRow.insertCell(1); 
 
\t cell0.innerHTML = "x"; 
 
\t cell1.innerHTML = 60; 
 
} 
 

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

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

 
\t downloadLink.click(); 
 
} 
 

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

 
    </script> 
 

 
    
 
</body> 
 
</html>

+0

兩個問題遺蹟。 –

+0

1.位置保存文件 –

+0

我想要的是'/ tmp/test.html',我得到的代碼是'/ Downloads/_tmp_test.html' –