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

我也为我的应用程序使用 jquery.filedownload，我希望我的解决方案能帮助与我有类似要求的其他人；我稍微改变一下用法。IE：

  1. 我将它与 rails3 一起使用

  2. 我想显示高音引导模式而不是 jquery 的对话框。

A.客户端（前端），下面是支持用户在 HTML 页面点击文件项时下载文件的功能：

函数下载文件（id，file_url，file_name，strTime）{

$.fileDownload(file_url, {
    successCallback: function (url) {
        $("#ilulModaldow").find('#file_name').html(file_name);
        $("#ilulModaldow").find('#file_created_at').html(strTime);
        $("#ilulModaldow").modal();
        //DATNT comment: $("#ilulModaldow") is a normal tweeter modal
    },
    failCallback: function (html, url) {

        alert('Connection error! Please try again');
    }
});

}

B.服务器端（后端），我创建了一个发送文件的动作，这个动作是上面javascript函数的参数“file_url”：

高清下载

a=APostAttach.find(params[:id])
send_file a.file.path(:original), :type => a.file_content_type
#DATNT comment: below is the way I set cookies for jquery.filedownload plugin requirement
cookies[:fileDownload] = true
cookies[:Path] = "/"

结尾

C.根据item(file)点击事件结合后端和字体端：

$('#attach_<%= attach.id %>').click(function(){
    DownloadFile("<%= attach.id %>","<%= download_courses_path(:id => attach.id) %>","<%=attach.file_file_name %>","Uploaded at <%=  time_ago_in_words(attach.created_at).gsub('about','') + ' ago'%>");

});
于 2013-04-25T02:53:44.910 回答
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 回答