2016-06-27 6 views
0

最終的な目標は、csvファイルを作成するフォームを作成することです。私はfilesaver.jsの仕組みを理解しようとしています。私は以下のコードを試しましたが、動作させることはできません。何か案は?FileSaver.js submit

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"/> 
    <script async="" src="FileSaver.js"/> 
    <script async="" src="Blob.js"/> 
    <script async="" src="FileSaver.min.js"/> 

    <script type="text/javascript"> 


    function Write() 
    { 
     var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"}); 
     saveAs(blob, "hello world.txt"); 
    } 

    </script> 

    </head> 
    <body> 
    <div id="container"> 
      <h2>Palaces</h2> 

      <form NAME="userform" onsubmit="return Write();"> 



       <p class="submit"><button type="submit" value="Save">Signup</button></p>   

      </form> 
    </div> 
    </body> 
    </html> 

答えて

1

FileSaver.jsが ONSUBMIT では動作しないようです。ここに私の回避策があります:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<script src="FileSaver.js"></script> 
<script> 
    window.onload = function() { 
     document.form1.action = download(); 
    } 


    function download(){ 
    var data = [nomen.value, image.value, X.value, Y.value, message.value] 
    dataString = data.join(","); 
    var blob = new Blob([dataString],{type:"text/plain;charset=utf-8"}); 
    saveAs(blob,"helloworld.csv"); 
    } 
</script> 

</head> 
<body> 
<div id="container"> 
     <h2>Palaces</h2> 

     <form NAME="form1" onsubmit="return download();return false"> 

      <fieldset><legend>CSV input</legend> 
       <p class="first"> 
        <label for="nodename">Name of information</label> 
        <input type="text" name="nomen" id="nomen" size="30"> 
       </p> 
       <p> 
        <label for="image">image file name</label> 
        <input type="text" name="image" id="image" size="30" /> 
       </p> 
       <p> 
        <label for="X">Point X axis</label> 
        <input type="number" name="X" id="X" size="30" /> 
       </p> 
       <p> 
        <label for="Y">Point Y axis</label> 
        <input type="number" name="Y" id="Y" size="30" /> 
       </p> 
       <p> 
        <label for="message">message<b>written in HTML</b></label><br> 
        <textarea cols="50" rows="4" name="message" id="message" placeholder="Once upon a time..."></textarea> 
       </p> 
      </fieldset>    

      <input type="button" value="download" onclick="return download();return false"/> 
     </form> 
</div> 
</body> 
</html>