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数据分配给对象的数据属性

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

导致400 Bad Request错误。

我想我错过了一些明显的东西，感谢他们的帮助。

此致 1DMF

Answer 1

经过几个小时的冲击，看起来你不能使用AJAX来执行文件请求，所以进度表是不可能的（即使修复了附加事件监听器以进行上传的失败） GET！）

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

最后，我进行了一次不那么优雅的超时，所以即使PDF文档在1秒内加载，也不会在3秒内看到，这足以让我们必须加载之前加载的最大PDF正在展示。

我不认为它会从用户体验中减去那么多，因为最终用户似乎对所有选定的文档都运行顺畅并花费相同的时间，因此至少可以保持连续性。

这是我的解决方案

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

动态加载PDF

1 个答案: