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

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

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

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

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

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

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

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

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

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

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

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

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

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

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