6

ユーザーがレポートの生成を選択したときに、「しばらくお待ちください」というメッセージを生成するために、John Culviner の優れた fileDownload プラグインを使用しています。

ユーザーがリンクをクリックすると、PHP に ajax リクエストが送信され、サーバー上で PDF が生成されます。その時点で、fileDownload プラグインの成功ハンドラーのリンクを更新しようとしています。

私はこれに間違って近づいているかもしれませんが、これが私のコードです - どんな助けも大歓迎です。

$("body").on("click","##pdfLink", function(e){

    $.fileDownload($(this).attr('href'), {
        preparingMessageHtml: "Preparing your report, please wait...",
        failMessageHtml: "There was a problem generating your report, please try again."
    });

    // Build our data string.
    var strData = {method: "createPDF"};

    // Send a request to build our XL file.
    $.ajax({
        url: '/pdf.php',
        data: strData,
        type: 'get',
        dataType: 'json',
        success: function(data) {
            alert(data);
            $("##pdfLink").attr("href","/pdf/"+data);
        },
        error: function(e) {
            console.log(e);
        }
    });
    return false; 
    e.preventDefault(); 
})

この時点で、リンクをクリックすると、モーダルが正しく表示され、「お待ちください」というメッセージが表示されます。私のファイルはサーバー上に構築され (私の成功ハンドラーのアラートで確認されました)、私の HREF は更新されます。ただし、プラグインはユーザーにダウンロードを要求しません。

ありがとう！

4

5 に答える 5

2

おそらく、リンクの参照が受信された後、ダウンロードを開始する必要があります。

 $("body").on("click","##pdfLink", function(e){
    // Build our data string.
    var strData = {method: "createPDF"};        

    var self = this;
    var $pdfGeneratingDialog = $('<div>',{
                   title:"Generating PDF",
                   text: "Please wait..."
                   }).dialog({modal:true});
    // Send a request to build our XL file.
    $.ajax({
        url: '/pdf.php',
        data: strData,
        type: 'get',
        dataType: 'json',
        success: function(data) {
           $pdfGeneratingDialog.dialog('close');

           alert(data);
           $(self).attr("href","/pdf/"+data);
           //starting download process
           $.fileDownload($(self).attr('href'), {
               preparingMessageHtml: "Preparing your report, please wait...",
               failMessageHtml: "There was a problem generating your report, please try again."
           });             
        },
        error: function(e) {
            console.log(e);
        }
    });
    return false;
});
于 2012-06-22T19:49:33.967 に答える
2

JS で ajax 関数を呼び出す必要はありません。リンクは、pdf のサーバー プロセスの<a href='yoursite.com/pdf.php'このコマンドの場所で識別されます。$(this).attr('href')

編集：

あなたの電話:

// Build our data string.
var strData = {method: "createPDF"};

var $preparingFileModal = $("#preparing-file-modal");
$preparingFileModal.dialog({ modal: true });

$.fileDownload($(this).attr('href'), {
    httpMethod: "GET",
    data: strData
    successCallback: function (responseHtml, url) {
        $preparingFileModal.dialog('close');
        // In this case 
        $.fileDownload("/pdf/"+responseHtml, {
            preparingMessageHtml: "Download file",
            failMessageHtml: "Not work"
        });

    },
    failCallback: function (responseHtml, url) {
        $preparingFileModal.dialog('close');
        $("#error-modal").dialog({ modal: true });
    }
});

HTML:

<div id="preparing-file-modal" title="Preparing report..." style="display: none;">
    We are preparing your report, please wait...

    <div class="ui-progressbar-value ui-corner-left ui-corner-right" style="width: 100%; height:22px; margin-top: 20px;"></div>
</div>

<div id="error-modal" title="Error" style="display: none;">
    There was a problem generating your report, please try again.
</div>
于 2012-06-22T19:55:12.060 に答える
0

タイムアウトを調整してみましたか？

$.ajax({
        url: '/pdf.php',
        data: strData,
        type: 'get',
        dataType: 'json',
        timeout: 10000,
        success: function(data) {
            alert(data);
            $("##pdfLink").attr("href","/pdf/"+data);
        },
        error: function(e) {
            console.log(e);
        }
    });
    return false; 
    e.preventDefault();
于 2012-06-22T19:44:21.663 に答える
0

次のコードを使用して、同じウィンドウでファイルをダウンロードしています(新しいタブを開かずに)。エラーサポートはありませんが、動作します...

function downloadURL(url, callback) {

    var id = 'hiddenDownloader';
    $('body').append('<iframe id="' + id + '" style="display: block" src="' + url + '"></iframe>');

    var $iframe = $('#' + id);
    $iframe.on('load', function () {
        $iframe.remove();
        // no error support
        callback();
    });
}


downloadURL('http://example.com', function() {
  alert('Done');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

于 2018-01-18T17:39:17.150 に答える