FileSaver.js 提交

Question

我的最终目标是制作一个可以创建 csv 文件的表单。我想弄清楚 filesaver.js 是如何工作的。我尝试了下面的代码，但无法正常工作。有什么想法吗？

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

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

FileSaver.js 提交

FileSaver.js submit

html

javascript

filesaver.js