问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在输入框输入文本 可下载成文本文件 怎么实现

头像
APIII
    11612

    输入框内输入的文件 输入完后 怎么压入到一个txt或文本文件里 进行下载

    javascripthtmlnode.js
    阅读 2.9k
    4 个回答
    得票最新
    头像
    Ter
      512214

      思路：获取input的输入内容，然后调用下面的函数，把内容作为文本下载

      关键代码：

          // fileName 是文件名，可以自定义，如 abc.txt
    // content 是input输入的内容
    createAndDownloadFile=function(fileName, content) {
        const aTag = document.createElement('a');
        const blob = new Blob([content]);
        aTag.download = fileName;
        aTag.href = URL.createObjectURL(blob);
        aTag.click();
        URL.revokeObjectURL(aTag.href);
    }
      头像
      Rossy1
        2.1k1065119
        
var a = document.createElement('a')
var content = 'download text';//文件内容
var blob = new Blob([content])
a.textContent = 'Click here to Download'
a.href = URL.createObjectURL(blob)
a.download = '下载.txt'
document.body.append(a)
        头像
        忆先
          4.2k2317

          直接把下载按钮的href属性写成data:text/plain,<文本内容>，可以使用JavaScript修改具体的文本内容

          头像
          蓝天海礁
            1.7k31323

            补充一楼，讲的很明白啊

            <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>保存文本文件到本地</title>
</head>
<body>
  <input type="text" id="inputVal" value="qqq">
  <div id="save">保存</div>
</body>
<script type="text/javascript">
    createAndDownloadFile=function(fileName, content) {
        const aTag = document.createElement('a');
        const blob = new Blob([content]);
        aTag.download = fileName;
        aTag.href = URL.createObjectURL(blob);
        aTag.click();
        URL.revokeObjectURL(aTag.href);
    }
    var save=document.getElementById("save");
    save.addEventListener("click",function(){
        createAndDownloadFile("txt文件",document.getElementById("inputVal").value);
    });
</script>
</html>
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题