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

Question

I have tried so many examples but none of them works t

 (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'), textbox = document.getElementById('textbox'); create.addEventListener('click', function() { var link = document.getElementById('downloadlink'); link.href = makeTextFile(textbox.value); link.style.display = 'block'; }, false); })();

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

here is a code which is working good but i need to download automatically without using link is it possible?

Answer 1

You could use the following script to create and save automatically a file from the browser to your operating system. This code works only on latest version of Chrome.

What the script does?

• It creates a temporary URL containing the specified File object or Blob object - Programmatically click the link just created so the file will be download by the browser.

• Immediately after remove the link from the page.

   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

If you deconstruct this problem, there's a few key points:

1. Initially, when the user hasn't typed text into the textarea, the button should not be visible. (I may be wrong here though)
2. When the user starts typing, the button has to appear.
3. Whatever is inside the textarea after that, has to be downloadable per click on the button.

So, it's a matter of two event listeners.

The first one is "focus": when the textarea received focus, its value is an empty string, and the button appears. The user hasn't yet started typing, but there's actually no need to force them to.

The second one is "change": per every change in the field, we need to update the value of href attribute of the link, so that when the user clicks that element, file download happens, and the content is precisely what's inside the textarea. Good thing, a function passed to "change" event listener is executed with the first argument instance of Event, which means you can do event.target.value to get the new value per every change. It means, the whole text from within textarea.

Summing up, it's

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

and

(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
  });
})();

Take note that only a element can have href assigned with Blob value. Using a button element would be a little bit more complicated, so it might be easier to just make the a element look like a button.

See the Codepen to make sure it works as you expect, or feel free to edit it otherwise.