动态加载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，但是，通过

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

的PDF数据对象的数据属性的分配

正在导致400错误请求错误。

我想我失去了一些明显的东西，帮助表示赞赏。

问候， 1DMF

Answer 1

扑我的头在这几个小时后，嗯，看来你不能使用AJAX来执行文件的请求，所以进度表是出了问题（即使失礼是固定的附加事件监听器上传GET！）

使用事件侦听器的onload的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元素，我仍然感兴趣。

Regards， 1DMF