Создание файлов с помощью 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();
	});
 
});

На этом всё, посмотреть пример вы можете на демо странице, так же ниже есть ссылка на скачивание исходников, чтобы вы могли сразу попрактиковаться у себя на хостинге или локальной машине.

Интересно будет почитать:

10 комментариев

Maxi

7 лет назад Ответить

Епта, пишешь, как для дебилов) будь проще) возможно народ будет в комментах чет спрашивать)
- Dicim
  
  7 лет назад Ответить
  
  Да лучше сразу расписать, чтоб на тупые вопросы по пять раз не отвечать.
Андрей

7 лет назад Ответить

Разве это намного проще чем скопировать нужный текст, вставить его в редактор текстовых файлов и сохранить? По моему нет. Не вижу большой выгоды.

Вот если бы на странице можно было бы выделить текст нажать на нем правой кнопкой и выбрать пункт «сохранить в файл» — было бы полезно.
- Dicim
  
  7 лет назад Ответить
  
  Вы принципе правы, но как пример я думаю не помешает. Насчёт вашего предложения — я поищу, может быть получится найти решение.
Павел

7 лет назад Ответить

Здравствуйте!

Понравился Ваш пост. Подскажите как сделать то же самое, только в POST запросе будет приходить кусок xml кода, его обернуть в файл (например test.xml) и отдать пользователю, без сохранения самого файла на сервере?
За помощь буду очень признателен! =)
- Dicim
  
  7 лет назад Ответить
  
  Можно, вы просто исправьте export.txt на export.xml и будет файл сохраняться в xml формате.
  - Павел
    
    7 лет назад Ответить
    
    А зачем создавать iFrame? почему нельзя просто сделать ajax с post запросом?
Александр

7 лет назад Ответить

Очень полезно и интересно.
А если например нужно несколько полей для заполнения . И каждое поле в итоге должно уставляться в некоторое оформление или например должен быть вначале статич
Вадим

6 лет назад Ответить

Что то ваш скрипт в архиве не работает на локалке !
Алексей

3 года назад Ответить

Здравствуйте!
А можно сделать так, чтобы создавался файл word? И для заполнения было не одно поле, а несколько? А между полями для заполнения был статичный текст.