CODEWITHSUNDEEP
javascripthtmlfilesaver.js
Rickard Hultgren
Rickard Hultgren

Reputation: 53

FileSaver.js submit

My final goal is to make a form that creates csv files. I'm trying to figure out how filesaver.js works . I tried the code below but can't get it working. Any ideas?

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

Upvotes: 0

Views: 510

Answers (1)

Rickard Hultgren
Rickard Hultgren

Reputation: 53

It seems that FileSaver.js doesn't work with onsubmit. Here is my workaround:

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

Upvotes: 1

Related Questions