Загрузите содержимое textarea как файл, используя только Javascript (без серверной)

Мне предлагается создать кнопку загрузки, которая загружает содержимое текстового поля на той же странице, что и файл, при открытии диалогового окна браузера "Сохранить как...". Копировать/вставить было бы очень просто, но это "требование".

Прямо сейчас, я просто размещаю содержимое текстового поля на сервере, которое возвращает их обратно с Content-disposition: attachment. Есть ли способ сделать это с помощью только Javascript на стороне клиента?

Ответ 1

Это может быть то, что вы ищете: http://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/

Он использует диалог загрузки браузера, но поддерживает только FF и Chrome, а может и больше браузеров сейчас?

   function saveTextAsFile(textToWrite, fileNameToSaveAs)
    {
    	var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'}); 
    	var downloadLink = document.createElement("a");
    	downloadLink.download = fileNameToSaveAs;
    	downloadLink.innerHTML = "Download File";
    	if (window.webkitURL != null)
    	{
    		// 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.onclick = destroyClickedElement;
    		downloadLink.style.display = "none";
    		document.body.appendChild(downloadLink);
    	}
    
    	downloadLink.click();
    }

<textarea id=t>Hey</textarea><br>
<button onclick=saveTextAsFile(t.value,'download.txt')>Download</button>

Ответ 2

Вы можете попробовать window.location = "data:application/octet-stream,"+text, но это не обеспечивает механизм, с помощью которого вы можете предложить имя, а также IE имеет очень маленькую кепку на максимальной длине URI данных, которая может быть проблемой.

Ответ 3

Были некоторые библиотеки javascript, которые делали это с помощью небольшого встроенного SWF файла. Например этот.

Ответ 4

Я нашел простое решение здесь: http://www.codingforums.com/archive/index.php/t-181561.html

My text area:<br />
<textarea rows='10' cols='80' id='myTextArea' ></textarea>

<br /><br />

Download button: <br />
<input value='download' type='button'
onclick='doDL(document.getElementById("myTextArea").value)' />


<script type='text/javascript'>
function doDL(s){
    function dataUrl(data) {return "data:x-application/text," + escape(data);}
    window.open(dataUrl(s));
}
</script>

Надеюсь, это поможет.

Ответ 5

Абсолютно возможно использование этой кросс-браузерной JavaScript-реализации функции HTML5 saveAs: https://github.com/koffsyrup/FileSaver.js

Если все, что вы хотите сделать, это сохранить текст, то указанный выше script работает во всех браузерах (включая все версии IE), не требуется SWF.

Ответ 6

Возможно, это будет возможно, создав фрейм, набрав там содержимое, затем позвонив document.execCommand('saveas', ...) в IE и что-то с nsIFilePicker в Mozilla, но я считаю, что для этого потребуются некоторые необычные привилегии (например, быть частью самого браузера).

Ответ 7

На основании ответа @Cyrlop и fooobar.com/questions/13161306/... это позволяет указать имя файла:

            function doDownload(str) {
              function dataUrl(data) {
                return "data:x-application/xml;charset=utf-8," + escape(data);
              }
              var downloadLink = document.createElement("a");
              downloadLink.href = dataUrl(str);
              downloadLink.download = "foo.xml";

              document.body.appendChild(downloadLink);
              downloadLink.click();
              document.body.removeChild(downloadLink);
            }

@Superphonic решение, вероятно, лучше, если вы не возражаете, включив больше байтов в ваш JavaScript.

Ответ 8

Короткий ответ: он невозможен. Вы должны отправить его на сервер, а ответ от сервера может быть "Content-disposition: attachment".