Create Text File Using Javascript

February 28, 2024 Post a Comment

I want to create text file (notepad type file) using javascript. My code is given below but it is not working plz. Suggest me any solution for creating text file. var txt = new Ac

Solution 1:

you can try this:

(function () {
var textFile = null,
  makeTextFile = function (text) {
    var data = newBlob([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);
})();

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

Also you can show this DEMO

Solution 2:

The following code snippet demonstrate create a text files using the jQuery and HTML5 file API. For the sake of simplicity, in this example I am using Bootstrap CSS framework for building the page.

$('#btnSave').click(function() {
  if ('Blob'inwindow) {
    var fileName = prompt('Please enter file name to save', 'Untitled.txt');
    if (fileName) {
      var textToWrite = $('#exampleTextarea').val().replace(/n/g, 'rn');
      var textFileAsBlob = newBlob([textToWrite], { type: 'text/plain' });

      if ('msSaveOrOpenBlob'in navigator) {
        navigator.msSaveOrOpenBlob(textFileAsBlob, fileName);
      } else {
        var downloadLink = document.createElement('a');
        downloadLink.download = fileName;
        downloadLink.innerHTML = 'Download File';
        
        if ('webkitURL'inwindow) {
          // Chrome allows the link to be clicked without actually adding it to the DOM.
          downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
        } else {
          // Firefox requires the link to be added to the DOM before it can be clicked.
          downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
          downloadLink.click(function(){
            document.body.removeChild(event.target);
          }); 
          
          downloadLink.style.display = 'none';
          document.body.appendChild(downloadLink);
        }
        downloadLink.click();
      }
    }
  } else {
    alert('Your browser does not support the HTML5 Blob.');
  }
});

<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metaname="description"content="Your HTML, CSS, and JavaScript playground."><title>HTML, CSS, JS Playground</title><metacontent="width=device-width, initialscale=1"name="viewport"><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"rel="stylesheet"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"type="text/javascript"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"type="text/javascript"></script><script>
    $(document ).ready(function() {
        //Put your java script here
    });
    </script></head><body><divclass="container"><h1>Reading and Creating Text Files Using the HTML5 File API and jQuery</h1><divclass="form-group"><buttontype="button"class="btn btn-default"id="btnOpen">Open...</button><buttontype="button"class="btn btn-default"id="btnSave">Save</button></div><inputtype="file"id="exampleInputFile"accept=".txt,.csv,.xml"class="hidden"><divclass="form-group"><textareaclass="form-control"rows="15"id="exampleTextarea"></textarea></div></div></body>

source

Html5 Guide

Create Text File Using Javascript

Solution 1:

Solution 2:

Post a Comment for "Create Text File Using Javascript"