动态加载PDF

Question

对于传递从AJAX请求接收到的PDF数据并使用PDF数据更新对象，我似乎不能正确地理解语法。

当从服务器加载PDF时，我正在尝试包含一个进度/请等待机制，但我不会走得很远。

这是我的资料..。

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});
    }

});             

}

AJAX运行，PDF返回，但是，通过将PDF数据分配给对象的data属性

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

导致400错误请求错误。

我想我遗漏了一些明显的东西，我很感谢你的帮助。

致敬，1DMF

Answer 1

经过几个小时的努力，似乎你不能使用AJAX来执行文件请求，所以进度计量器是不可能的(即使这个失礼的问题已经解决了，需要为GET附加一个事件监听器来上传！)

使用事件侦听器来加载iFrame也不是一个好的选择，因为IE不会触发这个事件，FF似乎有点奇怪，因为它会触发它，然后再次重新加载PDF源代码。

最后，我选择了一个不那么优雅的超时，所以即使一个PDF文档在1秒内加载，它在3秒内也不会被看到，这足以让我们在显示之前加载最大的PDF。

我不认为它对UX有太大的影响，因为在最终用户看来，所有的东西都运行得很流畅，并且对所选的任何文档都需要相同的时间，所以至少提供了连续性。

以下是我的解决方案

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;       
}

当然，如果有一种方法可以通过AJAX监控PDF或Word文档的下载进度，并使用文档动态更新DOM元素，我仍然会感兴趣。

致敬，1DMF