Загрузите содержимое 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".