使用javascript生成文件

使用javascript生成文件

http://www.36ria.com/4379

使用javascript生成文件

• 点此查看demo
 
• 点此下载

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

原理简述：

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

html代码：

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

php处理数据，返回文件：

1. <?php
2.  
3. if(empty($_POST['filename']) || empty($_POST['content'])){
4.     exit;
5. }
6.  
7. $filename = preg_replace('/[^a-z0-9\-\_\.]/i','',$_POST['filename']);
8.  
9. header("Cache-Control: ");
10. header("Content-type: text/plain");
11. header('Content-Disposition: attachment; filename="'.$filename.'"');
12.  
13. echo $_POST['content'];
14.  
15. ?>

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

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

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

assets/jquery.generateFile.js

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

1. (function($){
2.    
3.     // 创建一个jquery插件
4.    
5.     $.generateFile = function(options){
6.        
7.         options = options || {};
8.        
9.         if(!options.script || !options.filename || !options.content){
10.             throw new Error("参数配置不合法!");
11.         }
12.        
13.         // 创建一个1*1的iframe
14.        
15.         var iframe = $('<iframe>',{
16.             width:1,
17.             height:1,
18.             frameborder:0,
19.             css:{
20.                 display:'none'
21.             }
22.         }).appendTo('body');
23.  
24.         var formHTML = '<form action="" method="post">'+
25.             '<input type="hidden" name="filename" />'+
26.             '<input type="hidden" name="content" />'+
27.             '</form>';
28.        
29.         // 加个延迟的原因是：给IE一些创建DOM的时间
30.        
31.         setTimeout(function(){
32.        
33.             // iframe的document中的body元素
34.        
35.             var body = (iframe.prop('contentDocument') !== undefined) ?
36.                             iframe.prop('contentDocument').body :
37.                             iframe.prop('document').body;    // IE
38.            
39.             body = $(body);
40.            
41.             // 向iframe添加内容
42.             body.html(formHTML);
43.            
44.             var form = body.find('form');
45.            
46.             form.attr('action',options.script);
47.             form.find('input[name=filename]').val(options.filename);
48.             form.find('input[name=content]').val(options.content);
49.            
50.             //提交表单
51.            
52.             form.submit();
53.         },50);
54.     };
55.    
56. })(jQuery);

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

1.生成个iframe

1. // 创建一个1*1的iframe
2.        
3.         var iframe = $('<iframe>',{
4.             width:1,
5.             height:1,
6.             frameborder:0,
7.             css:{
8.                 display:'none'
9.             }
10.         }).appendTo('body');

2.向iframe添加一个表单

表单结构如下：

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

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

1. // iframe的document中的body元素
2.        
3.             var body = (iframe.prop('contentDocument') !== undefined) ?
4.                             iframe.prop('contentDocument').body :
5.                             iframe.prop('document').body;    // IE
6.            
7.             body = $(body);
8.            
9.             // 向iframe添加内容
10.             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.提交表单

1. var form = body.find('form');
2.            
3.             form.attr('action',options.script);
4.             form.find('input[name=filename]').val(options.filename);
5.             form.find('input[name=content]').val(options.content);
6.            
7.             //提交表单
8.            
9.             form.submit();

初始化插件，生成文件

1. $('#download').click(function(e){
2.  
3.         $.generateFile({
4.             filename    : 'export.txt',
5.             content        : $('textarea').val(),
6.             script        : 'download.php'
7.         });
8.        
9.         e.preventDefault();
10.     });