Как получить входные значения из HTML в текстовый файл

Question

Я попытался так много примеров, но ни один из них не работает т

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

здесь код, который хорошо работает, но мне нужно для загрузки автоматически без использования ссылки возможно ли это?

Answer 1

Вы можете использовать следующий скрипт, чтобы автоматически создавать файл из браузера в вашу операционную систему. Этот код работает только в последней версии Chrome.

Что делает скрипт?

• Создает временный URL-адрес, содержащий указанный объект File или объект Blob. Программный щелчок по только что созданной ссылке, так что файл будет загружен браузером.

• Сразу после удаления ссылки со страницы.

  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

Если вы деконструкция этой проблемы, есть несколько ключевых моментов:

1. Первоначально, когда пользователь не набрал текст в текстовое поле, кнопка не должна быть видна. (Возможно, я ошибаюсь)
2. Когда пользователь начинает печатать, должна появиться кнопка.
3. Все, что находится внутри текстового поля после этого, должно быть загружено за клик по кнопке.

Итак, это вопрос двух слушателей событий.

Первый «фокус»: когда текстовая область получила фокус, ее значение представляет собой пустую строку, и появляется кнопка. Пользователь еще не начал печатать, но на самом деле нет необходимости их принуждать.

Второй вариант - «изменение»: за каждое изменение в поле нам нужно обновить значение атрибута ссылки href, так что когда пользователь нажимает на этот элемент, загрузка файла происходит, а контент точно что внутри текстового поля. Хорошо, функция, переданная в «change» event listener, выполняется с первым аргументом Event, что означает, что вы можете сделать event.target.value, чтобы получить новое значение за каждое изменение. Это означает, что весь текст изнутри textarea.

Подводя итог, это

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

и

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

Примите к сведению, что только a элемент может иметь href присваивается значение Blob. Использование элемента button было бы немного сложнее, поэтому было бы проще просто сделать a элемент посмотреть как кнопка.

См. the Codepen, чтобы убедиться, что он работает так, как вы ожидали, или не стесняйтесь редактировать его в противном случае.