動態加載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