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

Question

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

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

Answer 1

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

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

---

Edit:

Как прокомментирую, я буду вставлять код из статьи:

function saveTextAsFile()
{
    var textToWrite = //Your text input;
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
    var fileNameToSaveAs = //Your filename;

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

Answer 2

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

Answer 3

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

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

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

Answer 5

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

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

Answer 6

На основе ответа @ Cyrlop и https://stackoverflow.com/a/41948732/3096687, это дает возможность указать имя файла:

            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.

Answer 7

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

Answer 8

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