使用javascript生成文件
使用javascript生成文件
使用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();
- });