Question

我尝试了很多例子，但没有一个可行吨

<textarea id="textbox">Type something here</textarea>
<button id="create">Create file</button>
<a download="info.txt" id="downloadlink" style="display: none">Download</a>

{{1}}

这是一个工作正常但我需要自动下载而不使用链接的代码有可能吗？

Answer 1

您可以使用以下脚本自动创建文件并将其从浏览器保存到您的操作系统。此代码仅适用于最新版本的Chrome。

脚本的作用是什么？

它创建一个包含指定的File对象或Blob对象的临时URL - 以编程方式单击刚刚创建的链接，以便浏览器下载该文件。

从页面中删除链接后立即。

    var saveDataToFile = function (data, fileName, properties) {
        window.URL = window.URL || window.webkitURL;
        var file = new File(data, fileName, properties),
        link = document.createElement('a');
        link.href = window.URL.createObjectURL(file);
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
        var timer = setTimeout(function () {
            window.URL.revokeObjectURL(link.href);
            document.body.removeChild(link);
            clearTimeout(timer);
    }, 100);
};

Answer 2

如果你解构了这个问题，那么有一些关键点：

最初，当用户未在textarea中键入文本时，该按钮不应显示。（虽然我可能错了）
当用户开始输入时，必须出现按钮。
在此之后，无论文本区域内是什么，每次点击按钮都必须下载。

所以，这是两个事件听众的问题。

第一个是“焦点”：当textarea获得焦点时，其值为空字符串，并出现按钮。用户尚未开始输入，但实际上没有必要强迫他们进行输入。

第二个是“更改”：对于字段中的每个更改，我们需要更新链接的href属性的值，以便当用户单击该元素时，发生文件下载，并且内容正是textarea内部的内容。好的，传递给“change”事件监听器的函数是使用Event的第一个参数实例执行的，这意味着您可以event.target.value为每个更改获取新值。这意味着，整个文本来自textarea。

总结一下，这是

<textarea id="textbox" placeholder="Type something here"></textarea>
<a download="info.txt" id="create" href="#" style="display: none;">Create file</a>

和

(function() {
  var textFile = null,
    makeTextFile = function(text) {
      var data = new Blob([text], {
        type: 'text/plain'
      });

      // If we are replacing a previously generated file we need to
      // manually revoke the object URL to avoid memory leaks.
      if (textFile !== null) {
        window.URL.revokeObjectURL(textFile);
      }

      textFile = window.URL.createObjectURL(data);

      return textFile;
    };


  var create = document.getElementById('create');
  var textbox = document.getElementById('textbox');

  textbox.addEventListener('focus', function (event) {
    create.style.display = 'block';
    create.href = makeTextFile(''); // initially, the text is empty.
  });

  textbox.addEventListener('change', function (event) {
    create.href = makeTextFile(event.target.value); // per every change, update value of href attribute of #create
  });
})();

请注意，只有a元素可以为href分配Blob值。使用button元素会稍微复杂一点，因此将a元素看起来像更像一个按钮可能更容易。

请参阅the Codepen以确保其按预期工作，或者随时进行编辑。

如何从html获取输入值到文本文件

2 个答案: