Question

在某些页面上，我提供了一个调用页面（createPDF.php）的链接，该页面使用wkhtmloptf创建PDF，下载框最多可能需要30秒才能显示。

我想显示一个对话框（使用jQuery UI），它会在加载页面时显示一条消息，然后在下载框出现时消失。

现在：

用户点击PDF图标，它会打开一个jQuery UI对话框用户选择页面方向和页面格式。

用户点击“生成PDF”，其中包含：

( this ).dialog( "close" );  // Close current dialog (Select page orientation, ...)
$( "#dialog-modal" ).dialog( "open" );  // Open new dialog (Please wait while ....)
window.location.href = "<?php echo URL; ?>createPDF.php"; (generate and load the PDF)
// dialog should close here once the above URL is loaded

出现显示“请稍候”的对话框但弹出下载框时不会消失。

有什么想法吗？提前谢谢！

修改：

我尝试使用以下代码加载Ajax文件：

$.ajax({
    url: "<?php echo URL; ?>createPDF.php",
    async: false, 
    beforeSend: function( xhr ) {
        xhr.overrideMimeType( 'application/octet-stream' );
    },
    success: function(content) {
        $( "#dialog-modal" ).dialog( "close" );
    }
});

生成PDF后关闭对话框，但我没有下载框...

编辑3：

最后我使用了带超时的blockUI来关闭它。用户也可以根据需要关闭消息框。

$( this ).dialog( "close" );
$.blockUI({ message: '<div style="padding: 20px;"><div style="font-size: 20px;">Veuillez patienter pendant que votre PDF est généré.</div> <br /> Ceci peut prendre quelques secondes. <br /> <br />  Ce message peut disparaître avant que le téléchargement ne commence.</div>' });     
$('.blockOverlay').attr('title','Cliquez pour fermer ce message').click($.unblockUI);
var pdfFormat = $('#pdfFormat').val();
var pdfOrientation = $('#pdfOrientation').val();
pdfURL = pdfURL + "&f=" + pdfFormat  + "&o=" + pdfOrientation;
window.location.href = pdfURL; 
setTimeout(
    function(){
        $.unblockUI();
    }, 5000);

Answer 1

尝试使用this post中的方法。但是，不是使用图像并显示它，而是在$.ajaxStart()和$.ajaxStop()的功能中创建然后销毁对话框 - 或者先前初始化open / close对话框

Answer 2

最后我使用了带超时的blockUI来关闭它。用户也可以根据需要关闭消息框。

$( this ).dialog( "close" );
$.blockUI({ message: '<div style="padding: 20px;"><div style="font-size: 20px;">Veuillez patienter pendant que votre PDF est généré.</div> <br /> Ceci peut prendre quelques secondes. <br /> <br />  Ce message peut disparaître avant que le téléchargement ne commence.</div>' });     
$('.blockOverlay').attr('title','Cliquez pour fermer ce message').click($.unblockUI);
var pdfFormat = $('#pdfFormat').val();
var pdfOrientation = $('#pdfOrientation').val();
pdfURL = pdfURL + "&f=" + pdfFormat  + "&o=" + pdfOrientation;
window.location.href = pdfURL; 
setTimeout(
    function(){
        $.unblockUI();
    }, 5000);

生成和加载文件时的jQuery对话框（URL）

2 个答案: