m0_59239468
m0_59239468
2021-07-22 13:14
采纳率: 50%
浏览 54
已结题

html如何将输入文本框的内容进行导出

img
添加什么代码啊
功能加上一个保存按钮,实现保存功能,最好是能够导出来

  • 点赞
  • 收藏

5条回答 默认 最新

  • technologist_40
    CSDN专家-showbo 2021-07-22 13:46
    已采纳

    你自己耍来玩可以保存到localStorage中,但是不能和其他用户和浏览器共享数据,要共享数据需要搭建web服务器保存到数据库中

    导出可以通过blob导出,示例代码如下,有帮助麻烦点个采纳【本回答右上角】,谢谢~~

    <form>
        <input id="txt" />
        <input type="submit" id="submit" value="保存" />
        <input type="reset" value="清空" />
        <input type="button" id="export" value="导出" />
    </form>
    <script>
        var txt = document.getElementById('txt');
        var s = localStorage.getItem('value') || '';
        txt.value = s;
        document.querySelector('#submit').onclick = function () {
            localStorage.setItem('value', txt.value);
            alert('保存成功,刷新页面值还存在!')
            return false;
        }
    
        document.querySelector('#export').onclick = function () {
            var data = new Blob([txt.value]);
            var a = document.createElement('a');
            a.href = URL.createObjectURL(data);
            a.download = '要保存的文件名.txt';
            a.click();
            return false;
        }
    
    </script>
    
    
    点赞 评论
  • weixin_44058725

    这个得借助后端了吧。前端很难做到读写文件。并导出。前端需要把值传过去。后端,则存入到一个文件,并返回一个文件流地址

    点赞 评论
  • qq_40602449
    li.siyuan 2021-07-22 13:24

    想要持久的保存数据,需要连接数据库,
    否则就算保存到了页面刷新一下就没了

    请采纳

    点赞 评论
  • weixin_46555072
    望采纳最优答案 2021-07-22 13:47

    支持多浏览器 ie最方便使用document.execCommand 就好了 其余浏览器要做判断 使用超链接下载

    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <textarea name="wenben" id="wenben" cols="100" rows="10">000</textarea>
            <input type="button" value="Save" onclick="saveText()">
        </body>
        <script>
            function saveText(obj) {
                obj = document.getElementById("wenben")
                if (isIE()) {
                    //IE浏览器保存文本框内容 
    
                    var winSave = window.open();
                    winSave.document.open("text", "gb2312");
                    winSave.document.write(obj.value);
                    winSave.document.execCommand("SaveAs", true, "newfile.txt");
                    window.location.href = "#";
                    winSave.close();
                } else {
                    saveAs(obj, 'newfile.txt');
                }
            }
    
            function saveAs(obj, filename) {
                //chrome,火狐等现代浏览器保存文本框内容 
                var a = document.createElement('a');
                a.setAttribute('href', 'data:text/html;gb2312,' + obj.value);
                a.setAttribute('download', filename);
                a.setAttribute('target', '_blank');
                a.style.display = "none";
                obj.parentNode.appendChild(a);
                a.click();
            }
    
            //判断浏览器类型
            function isIE() {
                if (!!window.ActiveXObject || "ActiveXObject" in window) return true;
                else return false;
            }
        </script>
    </html>
    
    
    点赞 评论
  • Mrceel
    Mrceel 2021-07-22 15:46

    在html5中有个FileWrite 你可以去看看。

    点赞 评论

相关推荐