Javascript 单击以批处理文件形式下载textarea内容_Javascript_Jquery_Html_Batch File

Javascript 单击以批处理文件形式下载textarea内容
javascript jquery html batch-file
Javascript 单击以批处理文件形式下载textarea内容,javascript,jquery,html,batch-file,Javascript,Jquery,Html,Batch File,我在点击链接下载textarea内容时遇到问题。实际上，我希望它能够存储以下内容： java-jar（textareacontent）.jar 我希望下载的名为'info.bat'。所以，我试着用文本文件来做，但问题是它存储的是整个文档，而不仅仅是textarea内容。当我在JSFIDLE中试用它时，它会给出一条错误消息，要求我将其发布到服务器，然后下载。我不想把数据发送到服务器，有办法吗？这是HTML代码- <textarea id="textbox" rows="1" cols=
我在点击链接下载textarea内容时遇到问题。实际上，我希望它能够存储以下内容： java-jar（textareacontent）.jar
我希望下载的
名为'info.bat'。所以，我试着用文本文件来做，但问题是它存储的是整个文档，而不仅仅是textarea内容。当我在JSFIDLE中试用它时，它会给出一条错误消息，要求我将其发布到服务器，然后下载。我不想把数据发送到服务器，有办法吗？

这是HTML代码-
<textarea id="textbox" rows="1" cols="30"></textarea>   
<a href="#" download="info.txt" class="button">Download</a>

编辑：
<html>
    <head>
        <title>Top</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style type="text/css">
            body
            {
                background-color: #fff;
            }
            textarea
            {
                position: absolute;
                top: 30%;
                left: 48%;
            }
            a
            {
                position: absolute;
                top:50%;
                left: 50%;
                text-align: center;
                text-decoration: none;
            }
            a:link, a:visited 
            {
                display: block;
                font-weight: bold;
                background-color: #98bf21;
                color: #fff;
                border:2px solid #98bf21;
                width: 120px;
                height: 20px;
                border-radius: 25px;
                text-align: center;
                padding: 4px;
                text-decoration: none;
            }

            a:hover, a:active 
            {
                color: #000;
                background-color: #fff;
                border:2px solid #98bf21;
            }
        </style>
    </head>
    <body>
        <textarea id="textbox" rows="1" cols="30"></textarea>
        <a href="#" download="info.txt" class="button">Download</a>
        <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>-->
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script type="text/javascript">
        var anchor = document.querySelector('a.button');
        var textbox = document.querySelector('#textbox');
        anchor.onclick = function () 
        {
            var blob = new Blob([textbox.value], {type: "text/plain;charset=utf-8"});
            saveAs(blob, "info.txt");
            //window.navigator.msSaveOrOpenBlob(blob, 'msSaveBlobOrOpenBlob_testFile.txt');
        };
        </script>
    </body>
</html>

<html>
    <head>
        <title>Top</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style type="text/css">
            body
            {
                background-color: #fff;
            }
            textarea
            {
                position: absolute;
                top: 30%;
                left: 48%;
            }
            a
            {
                position: absolute;
                top:50%;
                left: 50%;
                text-align: center;
                text-decoration: none;
            }
            a:link, a:visited 
            {
                display: block;
                font-weight: bold;
                background-color: #98bf21;
                color: #fff;
                border:2px solid #98bf21;
                width: 120px;
                height: 20px;
                border-radius: 25px;
                text-align: center;
                padding: 4px;
                text-decoration: none;
            }

            a:hover, a:active 
            {
                color: #000;
                background-color: #fff;
                border:2px solid #98bf21;
            }
        </style>
    </head>
    <body>
        <textarea id="textbox" rows="1" cols="30"></textarea>
        <a href="#" download="info.txt" class="button">Download</a>
        <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>-->
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
        <script type="text/javascript">
        var anchor = document.querySelector('a.button');
        var textbox = document.querySelector('#textbox');
        anchor.onclick = function () 
        {
            var blob = new Blob([textbox.value], {type: "text/plain;charset=utf-8"});
            saveAs(blob, "info.txt");
            //window.navigator.msSaveOrOpenBlob(blob, 'msSaveBlobOrOpenBlob_testFile.txt');
        };
        </script>
    </body>
</html>


顶部
身体
{
背景色：#fff；
}
文本区
{
位置：绝对位置；
最高：30%；
左：48%；
}
A.
{
位置：绝对位置；
最高：50%；
左：50%；
文本对齐：居中；
文字装饰：无；
}
a:链接，a:已访问
{
显示：块；
字体大小：粗体；
背景色：#98bf21；
颜色：#fff；
边框：2px实心#98bf21；
宽度：120px；
高度：20px；
边界半径：25px；
文本对齐：居中；
填充：4px；
文字装饰：无；
}
a:悬停，a:活动
{
颜色：#000；
背景色：#fff；
边框：2px实心#98bf21；
}
var anchor=document.querySelector（'a.button'）；
var textbox=document.querySelector（'#textbox'）；
anchor.onclick=函数（）
{
var blob=new blob（[textbox.value]，{type:“text/plain；charset=utf-8”}）；
saveAs（blob，“info.txt”）；
//window.navigator.msSaveOrOpenBlob（blob，'msSaveBlobOrOpenBlob_testFile.txt'）；
};
您可以使用下载创建的文件。
我想这就是你想要的
请点击此处：
整个HTML:
<html>
    <head>
        <title>Top</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style type="text/css">
            body
            {
                background-color: #fff;
            }
            textarea
            {
                position: absolute;
                top: 30%;
                left: 48%;
            }
            a
            {
                position: absolute;
                top:50%;
                left: 50%;
                text-align: center;
                text-decoration: none;
            }
            a:link, a:visited 
            {
                display: block;
                font-weight: bold;
                background-color: #98bf21;
                color: #fff;
                border:2px solid #98bf21;
                width: 120px;
                height: 20px;
                border-radius: 25px;
                text-align: center;
                padding: 4px;
                text-decoration: none;
            }

            a:hover, a:active 
            {
                color: #000;
                background-color: #fff;
                border:2px solid #98bf21;
            }
        </style>
    </head>
    <body>
        <textarea id="textbox" rows="1" cols="30"></textarea>
        <a href="#" download="info.txt" class="button">Download</a>
        <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>-->
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script type="text/javascript">
        var anchor = document.querySelector('a.button');
        var textbox = document.querySelector('#textbox');
        anchor.onclick = function () 
        {
            var blob = new Blob([textbox.value], {type: "text/plain;charset=utf-8"});
            saveAs(blob, "info.txt");
            //window.navigator.msSaveOrOpenBlob(blob, 'msSaveBlobOrOpenBlob_testFile.txt');
        };
        </script>
    </body>
</html>

<html>
    <head>
        <title>Top</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style type="text/css">
            body
            {
                background-color: #fff;
            }
            textarea
            {
                position: absolute;
                top: 30%;
                left: 48%;
            }
            a
            {
                position: absolute;
                top:50%;
                left: 50%;
                text-align: center;
                text-decoration: none;
            }
            a:link, a:visited 
            {
                display: block;
                font-weight: bold;
                background-color: #98bf21;
                color: #fff;
                border:2px solid #98bf21;
                width: 120px;
                height: 20px;
                border-radius: 25px;
                text-align: center;
                padding: 4px;
                text-decoration: none;
            }

            a:hover, a:active 
            {
                color: #000;
                background-color: #fff;
                border:2px solid #98bf21;
            }
        </style>
    </head>
    <body>
        <textarea id="textbox" rows="1" cols="30"></textarea>
        <a href="#" download="info.txt" class="button">Download</a>
        <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>-->
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
        <script type="text/javascript">
        var anchor = document.querySelector('a.button');
        var textbox = document.querySelector('#textbox');
        anchor.onclick = function () 
        {
            var blob = new Blob([textbox.value], {type: "text/plain;charset=utf-8"});
            saveAs(blob, "info.txt");
            //window.navigator.msSaveOrOpenBlob(blob, 'msSaveBlobOrOpenBlob_testFile.txt');
        };
        </script>
    </body>
</html>


顶部
身体
{
背景色：#fff；
}
文本区
{
位置：绝对位置；
最高：30%；
左：48%；
}
A.
{
位置：绝对位置；
最高：50%；
左：50%；
文本对齐：居中；
文字装饰：无；
}
a:链接，a:已访问
{
显示：块；
字体大小：粗体；
背景色：#98bf21；
颜色：#fff；
边框：2px实心#98bf21；
宽度：120px；
高度：20px；
边界半径：25px；
文本对齐：居中；
填充：4px；
文字装饰：无；
}
a:悬停，a:活动
{
颜色：#000；
背景色：#fff；
边框：2px实心#98bf21；
}
var anchor=document.querySelector（'a.button'）；
var textbox=document.querySelector（'#textbox'）；
anchor.onclick=函数（）
{
var blob=new blob（[textbox.value]，{type:“text/plain；charset=utf-8”}）；
saveAs（blob，“info.txt”）；
//window.navigator.msSaveOrOpenBlob（blob，'msSaveBlobOrOpenBlob_testFile.txt'）；
};
以下方法可行：
var anchor = document.querySelector('a#button');

anchor.onclick = function(e) {

    var textbox_text = document.querySelector('#textbox').value;

    var textbox_file = new Blob([textbox_text], {"type":"application/bat"});  
    anchor.href = URL.createObjectURL(textbox_file);
    anchor.download = "yourfilename.bat";
};


var anchor=document.querySelector（“一个按钮”）；
anchor.onclick=函数（e）{
var textbox_text=document.querySelector（'#textbox'）.value；
var textbox_file=new Blob（[textbox_text]，{“type”：“application/bat”}）；
anchor.href=URL.createObjectURL（文本框文件）；
anchor.download=“newtext.txt”；
};

通过添加ID属性as button，我可以下载内容而不是整个HTML代码。但它如何允许我保存.bat文件？savaAs函数的第二个参数是文件名，你可以任意更改它。我面临的唯一问题是，当我运行fiddle时，它会存储文本框内容，但当我在localhost上运行html页面时，它会存储整个代码。知道为什么吗？顺便说一句，需要注意的是，并非所有浏览器都支持相同的文件API，因此如果您想支持IE9或以下版本，则需要使用服务器端代码进行回退。在本地工作时，可能还会有安全限制导致问题，最好在我编辑过问题的服务器（甚至是本地服务器）上进行测试。如果你能帮我找出整个程序被下载的原因，那将是非常有帮助的。遗憾的是，即使在这种情况下，当我在localhost上运行它时，整个代码都被保存了。是的，整个HTML页面都被保存了
    <textarea id="textbox" rows="1" cols="30"></textarea>
    <a href="#" download="info.txt" class="button" id="button">Download</a>
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        var anchor = document.querySelector('a#button');
        anchor.onclick = function(e) {

            var textbox_text = document.querySelector('#textbox').value;

            var textbox_file = new Blob([textbox_text], {"type":"application/bat"});  
            anchor.href = URL.createObjectURL(textbox_file);
            anchor.download = "newtext.txt";
        };
    </script>