jquery.fileDownload.js插件导出excel

因为使用ajax导出excel会出现问题,所以现在使用jQuery.fileDownload.js插件来解决导出excel的问题

http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/

在页面引入jquery.fileDownload.js插件

1、如下所示

<script type="text/JavaScript" src="${resource}/js/jquery.fileDownload.js"/></script>
<script type="text/javascript">
 $("#export_confirm").on("click",function(){
 var url="${path}/admin/information/student/export";
 $.fileDownload(url,{
  data:{semesterId:$("#misSemester").val()},
  prepareCallback:function(url){
   alert("正在导出,请稍后...");
  },
  successCallback: function(url){
   alert("导出完成!");
  },
  failCallback: function (html, url) {
   alert("导出失败,未知的异常。");
   } 
  });   
 });

jquery-file-Download.js源码解析:

onPrepare: function (url) {
    //preparingMessageHtml属性存在,弹出导出准备提示框
    if (settings.preparingMessageHtml) {
        //jueryUi dialog 可自己修改成其它的。
        $preparingDialog = $("<div>").html(settings.preparingMessageHtml).dialog(settings.dialogOptions);
    } else if (settings.prepareCallback) {
        //调用回调函数
        settings.prepareCallback(url);
    }
},
//导出失败调用的函数
onFail: function (responseHtml, url, error) {
    //准备提示对话框存在则关闭
    if ($preparingDialog) {
        $preparingDialog.dialog(‘close‘);
    }
    //failMessageHtml存在弹出对话框提示
    if (settings.failMessageHtml) {
        $("<div>").html(settings.failMessageHtml).dialog(settings.dialogOptions);
    }
     //调用回调函数
    settings.failCallback(responseHtml, url, error);
    deferred.reject(responseHtml, url);
}

2、在后台代码中设置Cookie,并返回Cookie的值

public
void export(final HttpServletRequest request, HttpServletResponse
response,final String semesterId) throws IOException,
IllegalArgumentException, IllegalAccessException {
  String fileName = "excel文件";
  response.reset();
  response.setContentType("application/vnd.ms-excel;charset=utf-8");
  response.setHeader("Content-Disposition", "attachment;filename=" + new String((fileName + ".xls").getBytes(), "iso-8859-1"));

//在这里加入设置Cookie   -------------
  Cookie fileDownload=new Cookie("fileDownload", "true");
  fileDownload.setPath("/");
  response.addCookie(fileDownload);

//------------------------------------
  ServletOutputStream out = response.getOutputStream();
  final HSSFWorkbook workbook = new HSSFWorkbook();
  List<Future<Boolean>> resultList = new ArrayList<Future<Boolean>>();

3、如果要使回调函数successCallback和failCallback起作用,还得在后台代码中返回Cookie

jquery-file-Download.js源码解析:

后台设置与特定的cookie值

前台js定时去调用checkFileDownloadComplete方法,检查前台与后台返回的cookie值是否匹配

//check if the file download has completed every checkInterval ms
setTimeout(checkFileDownloadComplete, settings.checkInterval);

function checkFileDownloadComplete() {
    //has the cookie been written due to a file download occuring?

    var cookieValue = settings.cookieValue;
    if(typeof cookieValue == ‘string‘) {
        cookieValue = cookieValue.toLowerCase();
    }

    var lowerCaseCookie = settings.cookieName.toLowerCase() + "=" + cookieValue;

    if (document.cookie.toLowerCase().indexOf(lowerCaseCookie) > -1) {

        //execute specified callback
        internalCallbacks.onSuccess(fileUrl);

        //remove cookie
        var cookieData = settings.cookieName + "=; path=" + settings.cookiePath + "; expires=" + new Date(0).toUTCString() + ";";
        if (settings.cookieDomain) cookieData += " domain=" + settings.cookieDomain + ";";
        document.cookie = cookieData;

        //remove iframe
        cleanUp(false);

        return;
    }
时间: 2024-10-16 05:06:27

jquery.fileDownload.js插件导出excel的相关文章

学会读JQuery等JS插件源码

很多人觉得jquery.ext等一些开源js源代码 十分的晦涩,读不懂,遇到问题需要调试也很费劲.其实我个人感觉主要是有几个方面的原因: 1.对一些js不常用的语法.操作符不熟悉 2.某个function中又嵌套了一些内部的function,使得整个代码的层次结构不像java代码那么清晰. 3.js中允许变量先使用后定义,会造成我们看代码时候忽然冒出来一个变量.function,却找不到是在哪里定义的. 那么今天给大家分享一下我的经验,扫清你的障碍. 一.一些晦涩的操作符: 1.(functio

jquery.validate.js插件的使用方法

近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" method="post"> username:<input type="text" id="UserName" name="UserName" /><!--<span id="name_

(转)jquery.url.js 插件的使用

jQuery插件之-jQuery URL Parser jQuery插件Query URL Parser用于解析URLs字符串.通过它我们可以方便地获取协议.主机.端口.查询参数.文件名.路径等等.在一些静态页面需要根据参数来调整一些内容的时候这个插件还是挺有用的. 官方下载(托管在github):http://github.com/allmarkedup/jQuery-URL-Parser 本地下载地址:jQuery-URL-Parser 插件可以返回的数据有下面几项: 1 .来源 – URL

异步上传图片,光用jquery不行,得用jquery.form.js插件

异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" method="POST" action="#" enctype="multipart/form-data"> <input name="upload" type="file" id="

jQuery.cookie.js插件了解及使用方法

jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jquery.com/project/cookie 1.准备工作 1)由于该插件依赖jQuery,所以首先在页面引入jquey插件 2)在页面引入jQuery.cookie.js 2.使用方法 设置cookie /* ** 设置cookie ** 第一个参数设置cookie的key ** 第二个参数设置co

jquery.autocomplete.js 插件的自定义搜索规则

这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: var stockInfoJson = [ { name: "深发展A", code: "000001",spell:"sfza" }, { name: "万科A", code: "000002",spell

jquery.validate.js插件的用法

最近做项目,需要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [例子如下] 1.前台页面 <form id="form1" method="post"> 用户名:<input type="text" id="UserName" name="UserName" /><!--<span id="name_error&q

整屏滚动效果 jquery.funnPage.js插件+CSS3实现

最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: 首先使用要引入插件 <link rel="stylesheet" href="../c/jquery.fullPage.css" media="all"/> <script type="text/javascript" src="../j/l

js jquery jquery.wordexport.js 实现导出word

由于工作需要,将一个页面导出word文档,主要是简历!经过百度搜索之后,没找到结果,无奈之下只能求助Google,意外发现jquery一款插件可以实现这个功能!而且效果还算可以! 基本可以实现想要的功能! 首先需要的js文件如下,贴出github地址,大家自由下载! https://github.com/eligrey/FileSaver.js/ https://github.com/markswindoll/jQuery-Word-Export 首先你要引入jquery 和FileSaver.