В этой статье мы научимся скачивать файл, сгенерированный средствами JavaScript без какого-либо обращения к серверу.
Основывается метод на Data URI scheme, который позволяет вставлять данные в HTML-страницу в формате
1 |
data:[<media type>][;base64],<data> |
Не буду долго расписывать, сразу покажу пример. В нём всё достаточно наглядно. Смысл заключается в том, что мы генерируем ссылку, в href которой прописываем данные, и кликаем на неё программно.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <title>Пример скачивания файла из JS</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="author" content="https://urvanov.ru"> <meta name="keywords" content="JavaScript, download, generate, link"> <meta name="description" content="Отдаём файл из браузера с помощью JavaScript."> <style> form * { display: block; margin: 10px; } </style> </head> <body> <script type="text/javascript"> function download(filename, text) { var element = document.createElement('a'); element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); element.setAttribute('download', filename); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); } </script> <div> <form onsubmit="download(this['name'].value, this['text'].value)"> <label for="filenamefield">Имя файла</label> <input id="filenamefield" type="text" name="name" value="filename.txt"> <label for="filecontentfield">Содержимое файла</label> <textarea id="filecontentfield" name="text">Сюда вставьте содержимое файла.</textarea> <input type="submit" value="Скачать файл"> </form> </div> </body> </html> |
Вот и всё. А постичь азы HTML вы можете с помощью учебника, также вам может пригодиться учебник JavaScript.