动态加载PDF

Question

I can't seem to get the syntax right for passing PDF data received from an AJAX request and updating an object with the PDF data.

I'm trying to include a progress meter / please wait mechanism while the PDF is loaded from the server, but I'm not getting very far.

here is what I have...

function viewButtonAction(items)
{
// show promotion document
showDialog({
    content:'<object id="viewFPDoc" data="" type="application/pdf" /><div id="viewFPDocWait"><p>Please wait, loading promotion document...</p><div id="progressMeter"></div></div>',
    title:items[0].html(),
    minHeight:600,
    minWidth:820
});

// show wait message
$('#viewFPDocWait').show('slide');

// initialise progress meter
initMeter('progressMeter',150);  

var myData = {
                ACTION: 'GETPDF',
                DOC: items[0].val() + '.' + items[0].data('file_ext'),
                USERID: $('#requireduser').val()
};

// get pre-approved doc via AJAX
$.ajax({
    url: '/cgi-bin/get_file.pl',  // server script to process data
    type: 'GET',
    xhr: function() {  // custom xhr for progress meter
        var myXhr = $.ajaxSettings.xhr();
        myXhr.upload.addEventListener('progress',showProgress, false); // for handling the progress of the upload
        return myXhr;
    },
    data: myData, 
    success: function(data,status,jqXHR){                     
        $('#viewFPDoc').attr('data',data);
        $('#viewFPDocWait').hide('slide');
        $('#viewFPDoc').show('slide');            
    },
    error: function(jqXHR,textStatus,errorThrown){
        showDialog({content:errorThrown});
    }

});             

}

The AJAX runs, the PDF is returned, however, the assignment of the PDF data to the data attribute of the object via

$('#viewFPDoc').attr('data',data);

is causing a 400 Bad Request error.

I guess I'm missing something obvious and help is appreciated.

Regards, 1DMF

Answer 1

well after bashing my head on this for a few hours, it seems you cannot use AJAX to perform file requests, so progress meter is out of the question (even when the faux pas is fixed of attaching the event listener to upload for GET!)

Using an event listener for onload of an iFrame also isn't an option as IE doesn't fire this event and FF seems a bit odd as it fires it and then reloads the PDF source again.

In the end I went for a not so elegant timeout, so even if a PDF doc loads in 1 second, it won't be seen for 3 seconds, which is enough to allow even the biggest PDF we have to load before being shown.

I don't think it detracts that much from the UX as everything seems to the end user to run smooth and take the same time for any doc selected, so at least gives continuity.

Here is my solution

JS

function viewButtonAction(items)
{
// show promotion document
showDialog({
    content:'<iframe id="viewFPDoc" src="" /><div id="viewFPDocWait"><p>Please wait, loading promotion document...<br /><img src="/members/images/wait.gif" /></p></div>',
    title:items[0].html(),
    minHeight:600,
    minWidth:820
});

// show wait message
$('#viewFPDocWait').show('slide');

// build QS
var QS = 'ACTION=GETDOC&DOC='+items[0].val() + '.' + items[0].data('file_ext') + '&USERID='+$('#user').val();            

// load PDF
$('#viewFPDoc').attr('src','/cgi-bin/get_file.pl?'+QS);

// wait a bit because there is no way to tell if a doc has loaded as IE doesn't issue onload for iFrames    
setTimeout(function() {
        $('#viewFPDocWait').hide('slide');
        $('#viewFPDoc').css('opacity',1); 
}, 3000);

}

CSS

#viewFPDocWait {
position:absolute;
text-align:center;
display:none;
width:95%;
}

#viewFPDoc {
z-index:1;
opacity:0;
transition: opacity 2s ease;       
}

It works well and the transition is very smooth and sleek, of course, if there is a way of monitoring download progress of a PDF or Word document via AJAX and dynamically updating a DOM element with the document, I'd still be interested.

Regards, 1DMF