Question

Is there any link for exporting the datas to notepad? I have some fields like Name, Age, and WorkingStatus

These are text and textarea...

I want to insert this datas to the notepad.Is there any demos or code available?

Was it helpful?

Solution

I don't know of any way to have the browser open notepad, but you can use HTML5 features to save a file as text, and then open it on your own inside notepad. Depending on the browser, you may need to trigger saving the file on the user side. Here's two references, which I'll summarize:

http://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/

http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side

Basically, you want to create and save a blob with your text. It should look something like this:

var arrayOfStuff = [];
arrayOfStuff.push("Name            Age              Working status");
arrayOfStuff.push("-----------------------------------------------");
arrayOfStuff.push(document.getElementById("name").value);
// etc
var blob = new Blob(arrayOfStuff, {type:'text/plain'});

// (the rest is copied directly from the wordpress link)
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null)
{
    // Chrome allows the link to be clicked programmatically.
    downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    downloadLink.click();
}
else
{
    // Firefox requires the user to actually click the link.
    downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
    document.body.appendChild(downloadLink);
}

If notepad isn't a big deal, you should also be able to open this blob in an iframe as .txt, and then right-click and saveAs, if you prefer.

Edit

Ok, this was actually new for me to play with, so some of my older information wasn't quite right. Here's the javascript from the working fiddle:

var arrayOfStuff = [];
arrayOfStuff.push(document.getElementById("name").value + "\n");
arrayOfStuff.push(document.getElementById("email").value);
arrayOfStuff.push("\n");
arrayOfStuff.push(document.getElementById("phone").value);
arrayOfStuff.push("\n");
arrayOfStuff.push(document.getElementById("comments").value);
arrayOfStuff.push("\n");
alert(arrayOfStuff);

var blob = new Blob(arrayOfStuff, {type:'text/plain'});

var link = document.getElementById("downloadLink");
link.download = "details.txt";
link.href = window.URL.createObjectURL(blob);

The fiddle is at http://jsfiddle.net/xHH46/2/

There are a few lessons learned:

  1. If you're on firefox, it gives you the option to open the .txt immediately in Notepad. However, notepad isn't paying attention to the linefeeds, whether they're \n or \n\r, appended to the immediate string or added separately, so I'd recommend using Wordpad instead. Or, you can save the file.
  2. More importantly, realize that the link you display is based on whatever value is in the text when you create the blob. If you don't have defaults, you'll get an empty file, because all the fields are empty. The wordpress solution fixes this (and discusses using it within the past week), but the fix is ugly. Basically, you'd have to click on a button, and the button would then make a link appear, and that link would give you the good file.

OTHER TIPS

You won't be able to do this with purely javascript. You need to generate the file server side and send it to the client.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top