CODEWITHSUNDEEP
javascriptjqueryhtmlbatch-file
Aishwarya L
Aishwarya L

Reputation: 47

Download textarea content as batch file onclick

I'm having trouble downloading the textarea content on the click of a link. Actually I want it to be able to store the following : java -jar (textarea content).jar

and I want the download to be of the name 'info.bat' . So, I tried doing it with text file but the issue is it's storing the entire document instead of only the textarea content. When I tried it out in JSFiddle it's giving an error message asking me to post it to the server and then to download it. I don't want to send the data to the server, is there any way out ? JsFddile

This is the HTML code -

<textarea id="textbox" rows="1" cols="30"></textarea>   
<a href="#" download="info.txt" class="button">Download</a>

Js -

var anchor = document.querySelector('a#button');
var textbox = document.querySelector('#textbox');
anchor.onclick = function () {
    anchor.href = (textbox.value);
    anchor.download = 'info.txt';
};

EDIT :

<html>
    <head>
        <title>Top</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style type="text/css">
            body
            {
                background-color: #fff;
            }
            textarea
            {
                position: absolute;
                top: 30%;
                left: 48%;
            }
            a
            {
                position: absolute;
                top:50%;
                left: 50%;
                text-align: center;
                text-decoration: none;
            }
            a:link, a:visited 
            {
                display: block;
                font-weight: bold;
                background-color: #98bf21;
                color: #fff;
                border:2px solid #98bf21;
                width: 120px;
                height: 20px;
                border-radius: 25px;
                text-align: center;
                padding: 4px;
                text-decoration: none;
            }

            a:hover, a:active 
            {
                color: #000;
                background-color: #fff;
                border:2px solid #98bf21;
            }
        </style>
    </head>
    <body>
        <textarea id="textbox" rows="1" cols="30"></textarea>
        <a href="#" download="info.txt" class="button">Download</a>
        <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>-->
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script type="text/javascript">
        var anchor = document.querySelector('a.button');
        var textbox = document.querySelector('#textbox');
        anchor.onclick = function () 
        {
            var blob = new Blob([textbox.value], {type: "text/plain;charset=utf-8"});
            saveAs(blob, "info.txt");
            //window.navigator.msSaveOrOpenBlob(blob, 'msSaveBlobOrOpenBlob_testFile.txt');
        };
        </script>
    </body>
</html>

Upvotes: 0

Views: 1391

Answers (3)

North
North

Reputation: 1434

You can use FileSaver.js to download files you created. I think this is what you want.

Check here: https://jsfiddle.net/2vh7f0ja/6/

var anchor = document.querySelector('a.button');
var textbox = document.querySelector('#textbox');
anchor.onclick = function () {
    var blob = new Blob([`java -jar ${textbox.value}.jar`], {type: "text/plain;charset=utf-8"});
    saveAs(blob, "a.bat");
};

Entire HTML:

<html>
    <head>
        <title>Top</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style type="text/css">
            body
            {
                background-color: #fff;
            }
            textarea
            {
                position: absolute;
                top: 30%;
                left: 48%;
            }
            a
            {
                position: absolute;
                top:50%;
                left: 50%;
                text-align: center;
                text-decoration: none;
            }
            a:link, a:visited 
            {
                display: block;
                font-weight: bold;
                background-color: #98bf21;
                color: #fff;
                border:2px solid #98bf21;
                width: 120px;
                height: 20px;
                border-radius: 25px;
                text-align: center;
                padding: 4px;
                text-decoration: none;
            }

            a:hover, a:active 
            {
                color: #000;
                background-color: #fff;
                border:2px solid #98bf21;
            }
        </style>
    </head>
    <body>
        <textarea id="textbox" rows="1" cols="30"></textarea>
        <a href="#" download="info.txt" class="button">Download</a>
        <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>-->
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
        <script type="text/javascript">
        var anchor = document.querySelector('a.button');
        var textbox = document.querySelector('#textbox');
        anchor.onclick = function () 
        {
            var blob = new Blob([textbox.value], {type: "text/plain;charset=utf-8"});
            saveAs(blob, "info.txt");
            //window.navigator.msSaveOrOpenBlob(blob, 'msSaveBlobOrOpenBlob_testFile.txt');
        };
        </script>
    </body>
</html>

Upvotes: 1

Aishwarya L
Aishwarya L

Reputation: 47

    <textarea id="textbox" rows="1" cols="30"></textarea>
    <a href="#" download="info.txt" class="button" id="button">Download</a>
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        var anchor = document.querySelector('a#button');
        anchor.onclick = function(e) {

            var textbox_text = document.querySelector('#textbox').value;

            var textbox_file = new Blob([textbox_text], {"type":"application/bat"});  
            anchor.href = URL.createObjectURL(textbox_file);
            anchor.download = "newtext.txt";
        };
    </script>

By adding the ID attribute as button, I was able to download the content and not the whole HTML code.

Upvotes: 1

Anthony
Anthony

Reputation: 37065

The following would work :

var anchor = document.querySelector('a#button');

anchor.onclick = function(e) {

    var textbox_text = document.querySelector('#textbox').value;

    var textbox_file = new Blob([textbox_text], {"type":"application/bat"});  
    anchor.href = URL.createObjectURL(textbox_file);
    anchor.download = "yourfilename.bat";
};

Upvotes: 0

Related Questions