使用javascript生成文件

demo中演示了使用javascript生成文件的典型应用：用户可以在输入框输入自定义的数据，然后可以点击保存，将这些数据保存到本地，无需再手动在本地新建个txt然后再复制，帮用户省了一步操作。
还有一个比较典型的应用：系统输出一段密匙给用户，密匙一般很复杂，希望用户可以快速保存到本地，本文的技术就派上用场了。
从理论上来讲，想要单纯依靠javascript生成文件，是不可能的，目前主流的有二种方案可以实现生成文件功能：1、javascript+flash，该方案网上有现成的插件，插件的名字明河忘记了，-_-!明河比较健忘；2、javascript+服务器端语言，这是明河比较推崇的方案，本文的demo采用javascript+php实现的，接下来对这个方案，明河进行下简单说明。

原理简述：

原理并不复杂，整个流程如下图：

html代码：

<form action="./" method="post">
<h4>在下面输入框输入任意文字</h4>
<textarea></textarea>
<a href="#" class="blueButton" id="download">下载</a>
</form>

php处理数据，返回文件：

<?php
if(empty($_POST['filename']) || empty($_POST['content'])){
exit;
}
$filename = preg_replace('/[^a-z0-9\-\_\.]/i','',$_POST['filename']);
header("Cache-Control: ");
header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="'.$filename.'"');
echo $_POST['content'];
?>

服务器端最关键地就是对header的重写，比如上述代码中的

header("Cache-Control: ");
header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="'.$filename.'"');

服务器端需要二个参数：filename和content，接下来我们来看如何通过脚本异步post过去。
异步post，条件反射地想到ajax，但这里我们借助iframe。

assets/jquery.generateFile.js

jquery.generateFile.js这个文件封装了生成文件的方法：

(function($){
// 创建一个jquery插件
$.generateFile = function(options){
options = options || {};
if(!options.script || !options.filename || !options.content){
throw new Error("参数配置不合法!");
}
// 创建一个1*1的iframe
var iframe = $('<iframe>',{
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>';
// 加个延迟的原因是：给IE一些创建DOM的时间
setTimeout(function(){
// iframe的document中的body元素
var body = (iframe.prop('contentDocument') !== undefined) ?
iframe.prop('contentDocument').body :
iframe.prop('document').body; // IE
body = $(body);
// 向iframe添加内容
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);
//提交表单
form.submit();
},50);
};
})(jQuery);

主要有如下几个关键步骤：

1.生成个iframe

// 创建一个1*1的iframe
var iframe = $('<iframe>',{
width:1,
height:1,
frameborder:0,
css:{
display:'none'
}
}).appendTo('body');

2.向iframe添加一个表单

表单结构如下：

var formHTML = '<form action="" method="post">'+
'<input type="hidden" name="filename" />'+
'<input type="hidden" name="content" />'+
'</form>';

将上述html片段加入到iframe中：

// iframe的document中的body元素
var body = (iframe.prop('contentDocument') !== undefined) ?
iframe.prop('contentDocument').body :
iframe.prop('document').body; // IE
body = $(body);
// 向iframe添加内容
body.html(formHTML);

这里明河重点提下prop方法，这是jquery1.6的新方法哦，这个方法的作用是什么呢？
以前的jquery中，全部使用attr来访问对象的属性，比如取一个图片的alt属性，使用$(‘#img’).attr(‘alt’);
但是在某些时候，比如访问checkbox的disabled属性的时候，会有些问题。在有些浏览器里，只要写了disabled就可以，有些则要写：disabled = “disabled”。所以，从1.6开始，jq提供新的方法“prop”来获取这些属性。使用prop的时候，返回值是标准属性，true/false，比如$(‘#checkbox’).prop(‘disabled’)，不会返回 “disabled”或者“”，只会是true/false。当然赋值的时候也是如此。如此，我们便统一了所有操作，无论是从语法上还是语义上。

3.提交表单

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);
//提交表单
form.submit();

初始化插件，生成文件

$('#download').click(function(e){
$.generateFile({
filename : 'export.txt',
content : $('textarea').val(),
script : 'download.php'
});
e.preventDefault();
});