Загрузить текстовое содержимое в виде пакетного файла onclick

У меня возникли проблемы downloading the textarea content on the click of a link. На самом деле я хочу, чтобы иметь возможность хранить следующее: Java -jar (содержание TEXTAREA) .jarЗагрузить текстовое содержимое в виде пакетного файла onclick

и я хочу download быть названия 'info.bat'. Итак, я попытался сделать это с текстовым файлом, но проблема в том, что он хранит весь документ, а не только содержимое textarea. Когда я попробовал это в JSFiddle, он дал сообщение об ошибке, в котором просил меня отправить его на сервер, а затем загрузить. Я не хочу отправлять данные на сервер, есть ли выход? JsFddile

Это HTML код -

<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>

источник

2015-06-04 Aishwarya L

<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>

Добавив атрибут ID как кнопку, я смог загрузить контент, а не весь HTML-код.

источник

2015-06-04 12:19:19

Вы можете использовать FileSaver.js для загрузки файлов, которые вы создали. Я думаю, что это то, что вы хотите.

Проверить здесь: 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"); 
};

Весь 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>

источник

2015-06-04 06:32:52 North

но как он позволяет мне сохранить файл .bat? –

вторым параметром функции savaAs является имя файла, вы можете изменить его произвольно. – North

Единственная проблема, с которой я сталкиваюсь, - это когда я запускаю скрипт, который хранит содержимое текстового поля, но когда я запускаю свою html-страницу на localhost, он сохраняет весь код. Любая идея почему? –

Следующая будет работать:

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"; 
};

источник

2015-06-04 10:56:02 Anthony

К сожалению, даже в этом весь код сохраняется, когда я запускаю его на localhost. –

Весь код? HTML-страница? – Anthony

Да, вся HTML-страница –

Загрузить текстовое содержимое в виде пакетного файла onclick

ответ

Смежные вопросы