个人中心
gpt4 book ai didi

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

转载 作者：搜寻专家 更新时间：2023-10-31 22:26:36 26 4
gpt4 key购买 nike

我正在使用 Jquery UI 对话框。在对话框中有一个文本区域，其中包含一些文本。当我单击对话框中的按钮时，我需要将该文本保存为 data.txt 之类的文本文件。

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

这是 jquery ui 对话框

$("#metaDataDialog").dialog({ //Jquery UI Dialog Intialization
           autoOpen: false, 
           modal: true, 
           width: 400,
           height: 300, 
           buttons: {
              Save: function() {},                   
              Cancel: function() { $(this).dialog( "close" ); }
           },                  
        });

当点击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>

关于javascript - 单击按钮从文本区域下载文本文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35148578/

26 4 0
文章推荐： swift - Swift 中的安全性会影响性能吗？
文章推荐： javascript - 根据选择显示图像阵列
文章推荐： ios - FSCalendar:如何获取两个日期中的日期？
文章推荐： javascript - 视频Js动态加载源
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com