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

Question

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

我正在处理响应的操作方法基本上如下所示：

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 视图中，我正在触发块UI 组件来禁用按钮，如下所示：

<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 调用，则文件下载不再有效。

有什么关于如何实现我的功能的建议吗？

Answer 1

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

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;
    }
}

Answer 2

我终于用上了 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 的 window 出现，这正是我最终想要实现的。

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

Execute JavaScript on client side within an non ajax call

javascript

ajax

callback

primefaces

jsf-2