在非ajax调用中在客户端执行JavaScript

时间:2015-03-11 16:37:51

标签: javascript ajax jsf-2 primefaces callback

在我的应用程序中,用户可以按下按钮来创建和下载文件。这个过程需要一些时间,因此我想在此过程中阻止UI,直到出现下载窗口。

动作方法是我处理响应看起来基本上是这样的:

public void download() {
    FacesContext facesContext = FacesContext.getCurrentInstance();
    ExternalContext externalContext = facesContext.getExternalContext();
    // set content disposition etc.    
    XSSFWorkbook wb = getWorkbook();
    wb.write(externalContext.getResponseOutputStream());            
    facesContext.responseComplete();
}

在我的JSF视图中,我触发了一个blockUI组件来禁用这样的按钮:

<p:commandButton value="Doanload" id="b" 
                 action="#{bean.doanload()}"
                 ajax="false" 
                 onclick="PF('crBui').show();"  />
<p:blockUI block=":trGrid" widgetVar="crBui" trigger="b">
     <p:graphicImage value="/images/loading.gif" alt="loading..."/>
</p:blockUI>

我尝试使用PrimeFaces RequestContext来执行一些JavaScript来隐藏blockUI组件,但这不起作用。 JavaScript未执行:

    public void download() {
        FacesContext facesContext = FacesContext.getCurrentInstance();
        ExternalContext externalContext = facesContext.getExternalContext();
        // set content disposition etc.    
        XSSFWorkbook wb = getWorkbook();
        wb.write(externalContext.getResponseOutputStream());    
        RequestContext.getCurrentInstance()
                      .execute("PF('crBui').hide();");        
        facesContext.responseComplete();
    }

如果我使用的是ajax调用而不是非ajax调用,那么文件下载将不再起作用。

任何建议我如何能够实现我的功能?

2 个答案:

答案 0 :(得分:3)

我最终使用了PrimeFaces的PrimeFaces.monitorDownload()'

在我看来:

<p:commandButton value="Doanload" id="b" 
             action="#{bean.doanload()}"
             ajax="false" 
             onclick="PrimeFaces.monitorDownload(start, stop);"  />

<script type="text/javascript">
    function start() {
        PF('crBui').show();
    }
    function stop() {
        PF('crBui').hide();
    }
</script>

让DownloadMonitor工作的主要技巧是在响应中设置一个Cookie:

externalContext.addResponseCookie(
    org.primefaces.util.Constants.DOWNLOAD_COOKIE,
    "true",
    Collections.<String, Object>emptyMap()
);

这样UI元素就会被阻止,直到FileDownload的窗口出现,这正是我想在最后实现的目标。

答案 1 :(得分:1)

您应该使用p:fileDownload而不是尝试创建一些homebrewn解决方案。来自展示的修改示例:

<强> XHTML:                                                              

<script type="text/javascript">
function start() {
    PF('crBui').show();
}

function stop() {
    PF('crBui').hide();
}
</script>

<强>豆:

import java.io.InputStream;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import javax.servlet.ServletContext;

import org.primefaces.model.DefaultStreamedContent;
import org.primefaces.model.StreamedContent;

@ManagedBean
public class FileDownloadView {

    private StreamedContent file;

    public FileDownloadView() {       
        InputStream stream = <create your stream>
        file = new DefaultStreamedContent(stream, "<your mime-type>", "<your filename>");
    }

    public StreamedContent getFile() {
        return file;
    }
}