Javascript 单击按钮从文本区域下载文本文件_Javascript_Jquery_Html_Jquery Ui_Save

Javascript 单击按钮从文本区域下载文本文件

javascript jquery html jquery-ui

Javascript 单击按钮从文本区域下载文本文件,javascript,jquery,html,jquery-ui,save,Javascript,Jquery,Html,Jquery Ui,Save,我正在使用jqueryui对话框。在对话框中有文本区域，其中包含一些文本。单击对话框中的按钮时，我需要将该文本保存为文本文件，如data.txt <div id = 'metaDataDialog' title='Meta Data' > <textarea id = 'metaText'> Some Text </textarea> </div> 当点击save按钮时，我需要在本地机器中保存/下载文本 <html>

我正在使用

jqueryui对话框

。在对话框中有文本区域，其中包含一些文本。单击对话框中的按钮时，我需要将该文本保存为文本文件，如

data.txt

<div id = 'metaDataDialog' title='Meta Data' >
  <textarea id = 'metaText'>
     Some Text
  </textarea>
</div>

当点击

save

按钮时，我需要在本地机器中保存/下载文本

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>


<script>

    $(document).ready(function () {

        function saveTextAsFile() {
            // grab the content of the form field and place it into a variable
            var textToWrite = document.getElementById("content").value;
            //  create a new Blob (html5 magic) that conatins the data from your form feild
            var textFileAsBlob = new Blob([textToWrite], { type: 'text/plain' });
            // Specify the name of the file to be saved
            var fileNameToSaveAs = "myNewFile.txt";

            // Optionally allow the user to choose a file name by providing 
            // an imput field in the HTML and using the collected data here
            // var fileNameToSaveAs = txtFileName.text;

            // create a link for our script to 'click'
            var downloadLink = document.createElement("a");
            //  supply the name of the file (from the var above).
            // you could create the name here but using a var
            // allows more flexability later.
            downloadLink.download = fileNameToSaveAs;
            // provide text for the link. This will be hidden so you
            // can actually use anything you want.
            downloadLink.innerHTML = "My Hidden Link";

            // allow our code to work in webkit & Gecko based browsers
            // without the need for a if / else block.
            window.URL = window.URL || window.webkitURL;

            // Create the link Object.
            downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
            // when link is clicked call a function to remove it from
            // the DOM in case user wants to save a second file.
            downloadLink.onclick = destroyClickedElement;
            // make sure the link is hidden.
            downloadLink.style.display = "none";
            // add the link to the DOM
            document.body.appendChild(downloadLink);

            // click the new link
            downloadLink.click();
        }

        function destroyClickedElement(event) {
            // remove the link from the DOM
            document.body.removeChild(event.target);
        }



        $("#download").click(function (e) {

            e.preventDefault();
            saveTextAsFile();
        });
 });  
</script>
</head>
<body>
    <input type="button" id="download" value="Download" />
   <textarea id="content">In trying to keep this plugin as simple as possible, all four states are always assumed to be present. You should prepare your button image as a single image the width you want your button, and four times the height of the button. All four states should then live in that one image in the same order as the previous list from top to bottom.</textarea>


</body>
</html>

$（文档）.ready（函数（）{ 函数saveTextAsFile（）{ //抓取表单字段的内容并将其放入变量中 var textToWrite=document.getElementById（“内容”）.value； //创建一个新的Blob（html5魔术），用于保存表单字段中的数据 var textFileAsBlob=newblob（[textToWrite]，{type:'text/plain'}）； //指定要保存的文件的名称 var fileNameToSaveAs=“myNewFile.txt”； //（可选）允许用户通过提供 //HTML中的输入字段，并在此处使用收集的数据 //var fileNameToSaveAs=txtFileName.text； //为脚本创建“单击”链接 var downloadLink=document.createElement（“a”）； //提供文件名（来自上面的var）。 //您可以在此处创建名称，但使用变量 //允许以后更灵活。 downloadLink.download=fileNameToSaveAs； //为链接提供文本。这将被隐藏，以便您 //你想用什么就用什么。 downloadLink.innerHTML=“我的隐藏链接”； //允许我们的代码在基于webkit和Gecko的浏览器中工作 //不需要if/else块。 window.URL=window.URL | | window.webkitURL； //创建链接对象。 downloadLink.href=window.URL.createObjectURL（textFileAsBlob）； //单击链接时，调用函数将其从 //DOM，以防用户希望保存第二个文件。 downloadLink.onclick=destroyClickedElement； //确保链接已隐藏。 downloadLink.style.display=“无”； //将链接添加到DOM document.body.appendChild（下载链接）； //单击新链接 downloadLink.click（）； } 函数销毁ClickedElement（事件）{ //从DOM中删除链接 document.body.removeChild（event.target）； } $（“#下载”）。点击（功能（e）{ e、预防默认值（）； saveTextAsFile（）； }); }); 为了使这个插件尽可能简单，所有四种状态都假定存在。您应该将按钮图像准备为单个图像，宽度为您想要的按钮宽度，高度为按钮高度的四倍。然后，所有四个状态都应该按照与上一个列表从上到下相同的顺序存在于该图像中。

您希望

data.txt

最终出现在您的Web服务器上还是运行浏览器的本地机器上？@Rodin在本地机器上检查此链接@guratio它不起作用，它们正在使用锚定标记。jQuery UI对话框按钮不能有定位标记，请使用其他定位标记。这只是一个关于如何制作文本文件的想法，你可以制作。很有魅力，谢谢

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>


<script>

    $(document).ready(function () {

        function saveTextAsFile() {
            // grab the content of the form field and place it into a variable
            var textToWrite = document.getElementById("content").value;
            //  create a new Blob (html5 magic) that conatins the data from your form feild
            var textFileAsBlob = new Blob([textToWrite], { type: 'text/plain' });
            // Specify the name of the file to be saved
            var fileNameToSaveAs = "myNewFile.txt";

            // Optionally allow the user to choose a file name by providing 
            // an imput field in the HTML and using the collected data here
            // var fileNameToSaveAs = txtFileName.text;

            // create a link for our script to 'click'
            var downloadLink = document.createElement("a");
            //  supply the name of the file (from the var above).
            // you could create the name here but using a var
            // allows more flexability later.
            downloadLink.download = fileNameToSaveAs;
            // provide text for the link. This will be hidden so you
            // can actually use anything you want.
            downloadLink.innerHTML = "My Hidden Link";

            // allow our code to work in webkit & Gecko based browsers
            // without the need for a if / else block.
            window.URL = window.URL || window.webkitURL;

            // Create the link Object.
            downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
            // when link is clicked call a function to remove it from
            // the DOM in case user wants to save a second file.
            downloadLink.onclick = destroyClickedElement;
            // make sure the link is hidden.
            downloadLink.style.display = "none";
            // add the link to the DOM
            document.body.appendChild(downloadLink);

            // click the new link
            downloadLink.click();
        }

        function destroyClickedElement(event) {
            // remove the link from the DOM
            document.body.removeChild(event.target);
        }



        $("#download").click(function (e) {

            e.preventDefault();
            saveTextAsFile();
        });
 });  
</script>
</head>
<body>
    <input type="button" id="download" value="Download" />
   <textarea id="content">In trying to keep this plugin as simple as possible, all four states are always assumed to be present. You should prepare your button image as a single image the width you want your button, and four times the height of the button. All four states should then live in that one image in the same order as the previous list from top to bottom.</textarea>


</body>
</html>