Создание файлов с помощью JavaScript
23 марта 2012 года, Размещено в категории: jQuery / MooTools
Добрый день, хочу представить вам очень интересный урок и для многих он наверно пригодится. Суть его в том, что мы создадим специальную форму на сайте, скопировав в неё любой текст, вы сможете скачать его.
Таким образом, можно сохранять любую текстовую информацию - адреса, отчёты, пароли и тому подобные данные.
Всё будет сделано с помощью jQuery и простой обработчик на php.
Html код
Первым делом добавьте вот Html код, который приведён ниже, для того чтоб отображать форму для ввода текстовых данных и кнопка для скачивания.
Сохраняем текстовый файл с помощью JavaScript
<script src="jquery.generateFile.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><script src="script.js"></script> |
В конце мы подключаем jQuery и плагин generateFile
, который генерирует текстовые файлы из введённых данных.
script.js - это обработчик нашей формы по созданию текстовых файлов.
Код PHP
Как вы наверно знаете, на чистом JavaScript нельзя работать с файлами, потому что это не серверный язык. Поэтому нам надо создать файл download.php
и там прописать скрипт, который будет сохранять данные в файл.
if(empty($_POST['filename']) || empty($_POST['content'])){ exit; } $filename = preg_replace('/[^a-z0-9\-\_\.]/i','',$_POST['filename']); header("Cache-Control: "); // Кодировка utf-8 нужня для правильного отображения русских букв header('Content-type: text/html; charset=utf-8'); header('Content-Disposition: attachment; filename="'.$filename.'"'); echo $_POST['content']; |
JQuery
Этот код нужен для того, чтоб бы могли принять POST запрос и взять данные, которые были введены в форму. Создайте файл jquery.generateFile.js
и пропишите в него:
(function($){ // Создаём плагин на jQuery: $.generateFile = function(options){ options = options || {}; if(!options.script || !options.filename || !options.content){ throw new Error("Please enter all the required config options!"); } var iframe = $('<iframe width="300" height="150">',{ width:1, height:1, frameborder:0, css:{ display:'none' } }).appendTo('body'); var formHTML = '<form action="" method="post">'+ '<input type="hidden" name="filename" />'+ '<input type="hidden" name="content" />'+ '</form>'; setTimeout(function(){ var body = (iframe.prop('contentDocument') !== undefined) ? iframe.prop('contentDocument').body : iframe.prop('document').body; // IE body = $(body); // Добовлем к форме body: body.html(formHTML); var form = body.find('form'); form.attr('action',options.script); form.find('input[name=filename]').val(options.filename); form.find('input[name=content]').val(options.content); // Отправляем форму download.php // Появится диалоговое окно для загрузки файла form.submit(); },50); }; })(jQuery); Если объяснить простыми словами, то этот плагин на jQuery, создаёт скрытый iFrame и форма с данными находится внутри него. Мы передаём введённые данные через iFrame в наш скрипт обработчик. <h2>Script.js</h2> Вот и заключительная часть нашей работы. Файл Script.js обрабатывает данные для сохранения - название файла, путь к download.php: <pre lang="JavaScript">$(document).ready(function(){ $('#download').click(function(e){ $.generateFile({ filename : 'export.txt', content : $('textarea').val(), script : 'download.php' }); e.preventDefault(); }); $('#downloadPage').click(function(e){ $.generateFile({ filename : 'page.html', content : $('html').html(), script : 'download.php' }); e.preventDefault(); }); }); |
На этом всё, посмотреть пример вы можете на демо странице, так же ниже есть ссылка на скачивание исходников, чтобы вы могли сразу попрактиковаться у себя на хостинге или локальной машине.
Maxi
9 лет назад
Епта, пишешь, как для дебилов) будь проще) возможно народ будет в комментах чет спрашивать)
9 лет назад
Да лучше сразу расписать, чтоб на тупые вопросы по пять раз не отвечать.
9 лет назад
Разве это намного проще чем скопировать нужный текст, вставить его в редактор текстовых файлов и сохранить? По моему нет. Не вижу большой выгоды.
Вот если бы на странице можно было бы выделить текст нажать на нем правой кнопкой и выбрать пункт «сохранить в файл» — было бы полезно.
9 лет назад
Вы принципе правы, но как пример я думаю не помешает. Насчёт вашего предложения — я поищу, может быть получится найти решение.
Павел
8 лет назад
Здравствуйте!
Понравился Ваш пост. Подскажите как сделать то же самое, только в POST запросе будет приходить кусок xml кода, его обернуть в файл (например test.xml) и отдать пользователю, без сохранения самого файла на сервере?
За помощь буду очень признателен! =)
8 лет назад
Можно, вы просто исправьте export.txt на export.xml и будет файл сохраняться в xml формате.
Павел
8 лет назад
А зачем создавать iFrame? почему нельзя просто сделать ajax с post запросом?
Александр
8 лет назад
Очень полезно и интересно.
А если например нужно несколько полей для заполнения . И каждое поле в итоге должно уставляться в некоторое оформление или например должен быть вначале статич
Вадим
8 лет назад
Что то ваш скрипт в архиве не работает на локалке !
Алексей
5 лет назад
Здравствуйте!
А можно сделать так, чтобы создавался файл word? И для заполнения было не одно поле, а несколько? А между полями для заполнения был статичный текст.