在 p:fileDownload 开始时显示状态并在完成时隐藏状态 [英] Show status on start of p:fileDownload and hide status when it is finished

问题描述

我想在 zipManager.makeZip() 执行时显示 ajaxStatus...直到下载开始.如果 ajax=false，则文件下载有效但不显示 ajaxStatus.如果ajax=true，显示ajaxStatus但下载不成功！

I would like to display ajaxStatus while zipManager.makeZip() is executed... until the download starts. if ajax=false, the file download works but ajaxStatus not displayed. if ajax=true, ajaxStatus is displayed but download not working!

知道如何让 ajaxStatus 和 fileDownload 一起工作.

Any idea how to make the ajaxStatus and fileDownload work together.

提前致谢

凯姆

<h:form id="form">
    <p:commandLink id="download" value="Download"
        onstart="showStatus()" oncomplete="hideStatus()" 
        actionListener="#{zipManager.makeZip()}">
        <p:fileDownload value="#{zipManager.zip}"/>  
    </p:commandLink>
</h:form>

<p:ajaxStatus id="status" widgetVar="st" style="position:fixed;right:50%;bottom:50%">  
    <f:facet name="start">  
        <p:graphicImage value="images/wait.gif" />  
    </f:facet>  
</p:ajaxStatus>

推荐答案

如果ajax=false，文件下载成功但ajaxStatus不显示

那是因为下载不是通过 ajax 请求进行的.

That's because the download doesn't take place by an ajax request.

如果ajax=true，显示ajaxStatus但下载不工作！

那是因为无法通过 ajax 请求进行下载.JS/Ajax 会成功检索文件，但不知道如何处理.没有办法强制与 JS 进行 另存为 对话.JS无法访问本地磁盘文件系统(否则会造成巨大的安全漏洞).

That's because the download can't take place by an ajax request. JS/Ajax will successfully retrieve the file, but have no idea how to deal with it. There's no way to force a Save As dialogue with JS. There's no way to access the local disk file system with JS (it would otherwise have been a huge security breach).

知道如何让 ajaxStatus 和 fileDownload 一起工作.

使用 PrimeFaces 提供的 PrimeFaces.monitorDownload() JS 函数.一个完整的例子可以在他们自己的 展示页面 复制粘贴在下面以供参考(特别注意文件下载命令按钮的 onclick 属性):

Use the PrimeFaces-provided PrimeFaces.monitorDownload() JS function. A complete example can be found on their own <p:fileDownload> showcase page which is copypasted below for reference (note particularly the onclick attribute of the file download command button):

<p:dialog modal="true" widgetVar="statusDialog" header="Status" 
    draggable="false" closable="false" resizable="false">  
    <p:graphicImage value="/design/ajaxloadingbar.gif" />  
</p:dialog>  

<h:form id="form">  
    <p:commandButton id="downloadLink" value="Download" ajax="false"
        onclick="PrimeFaces.monitorDownload(start, stop)"
        icon="ui-icon-arrowthichk-s">  
        <p:fileDownload value="#{fileDownloadController.file}" />  
    </p:commandButton>  
</h:form>  

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

    function stop() {  
        statusDialog.hide();  
    }  
</script>  

这可以应用于您的特定情况，方法是更改​​命令链接，如下所示:

This can be applied in your particular case by changing the command link as follows:

<p:commandLink id="download" value="Download" ajax="false"
    onclick="PrimeFaces.monitorDownload(showStatus, hideStatus)"
    actionListener="#{zipManager.makeZip()}">

并将 替换为简单的 ，如展示示例中所示.

and replacing the <p:ajaxStatus> by a simple <p:dialog> as demonstrated in showcase example.

这一切都在幕后使用一个特殊的 cookie 进行，该 cookie 由 JS 以短时间间隔(每 100 毫秒左右)轮询一次.在创建文件下载响应期间，将在其标头上设置一个特殊的 cookie.一旦文件下载响应头到达浏览器，就会在浏览器中设置 cookie.当 JS 轮询器在浏览器 cookie 空间中找到它时，它会关闭进程.

This all works behind the scenes with a special cookie which is polled at short intervals by JS (every 100ms or so). During creating of the file download response, a special cookie will be set on its headers. Once the file download response headers arrives at the browser, then the cookie is set in the browser. When the JS poller finds it in the browser cookie space, then it closes the progess.

这篇关于在 p:fileDownload 开始时显示状态并在完成时隐藏状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！