通过AJAX按住按钮打开PDF文件

时间:2012-05-02 18:22:09

标签: jquery ajax pdf dojo

你能解决以下问题吗?

我有一个表单,您可以在其中选择参数来生成PDF报告,该报告将由浏览器打开的Struts 1.x操作返回。这在系统中完全同步工作。

但是我需要保护系统免受用户的攻击而无需一直进行报告,只有在生成报告后才能启用按钮锁定。

我的选择是在生成此报告的AJAX(异步调用)中创建一个函数,虽然此过程没有回复我,但我隐藏了按钮并显示“加载”,因此我显示了返回按钮并隐藏“加载”。

但我在两个不同的试验中遇到了问题:

在第一次尝试(代码1)中,按钮的jQuery行为和加载是预期的但是我的PDF文件返回下面的函数(数据)无法在浏览器下载窗口中打开:

...
success: function (data) {
    WinID var = window.open ('', 'newwin', 'width = 400, height = 500');
    WinId.document.open ();
    WinId.document.write (data);
    WinId.document.close ();
...

在第二次尝试(代码2)上使用Dojo返回PDF文件是预期的,但是当浏览器的下载窗口打开时失去控制权以便再次启用该按钮并禁用图像加载。

有没有办法在控制我的DIV中使用jQuery或Dojo打开这个PDF文件?

谢谢,

HTML片段:

...
<tr>
    <td colspan="3" align="center" valign="middle">
        <div id="button">
            <a href="javascript:execute();"> 
                <img src="images/btnExecute.png" alt="Execute" border="0" class="inputImage" /> 
            </a>
        </div>
        <div id="loadingImage">
            <img src='images/loading.gif' style="{align:right;}" />
        </div>
    </td>
</tr>
...

代码1(jQuery):

function execute()
{
    $.ajax({
        type:"GET",
        url: "generateReport.do",
        data: "action=print&param1=param1",
        dataType: "html",
        beforeSend : function() {
            //It works
            $('#button').hide();
            $('#loadingImage').show();
        },
        complete : function() {
            $('#button').show();
            $('#loadingImage').hide();
        },
        success : function(data) {
            var WinId = window.open('', 'newwin', 'width=400,height=500');
            WinId.document.open();
            WinId.document.write(data);
            WinId.document.close(); 
        }
    }); 
}

Code 2(Dojo):

function execute()
{   
    //It works
    $('#button').hide();
    $('#loadingImage').show();

    var url = "generateReport.do?action=print&param1=param1";             

    require(["dojo/io/iframe"], function(ioIframe){
        ioIframe.send({
            url: url,
            handleAs: "html"
        }).then(function(data){
            //It only works when my page returns the html message "Empty report"
            $('#button').show();
            $('#loadingImage').hide();
        }, function(err){
        });
    }); 
}

1 个答案:

答案 0 :(得分:0)

无法使用二进制PDF 设置HTML文档内容..您的generateReport.do返回的是什么,我怀疑它是.pdf附件?

您需要做的是让generateReport.do创建一个包含pdf内容的临时文件 - 然后返回其URL。获得URL后,将其放在window.open ..

的位置
  1. 调用generateReport.do
  2. function(data)在'data'中保存“http://mydomain.tld/cached_contents/234kj82341.pdf”
  3. function(data)调用window.open(data,window_open_parameters);
  4. 这将使任一浏览器提供PDF插件并适当地查看..我们无法通过javascript / dom执行此操作。

    或者,找一个flash插件或类似的,在你的window.document.write中,放一个<object src="my_pdf_plugin" ...></object>

    function execute()
    {   
        // this is Not dojo, it looks like jQuery, see below onload function
        $('#button').hide();
        $('#loadingImage').show();
    
        var url = "generateReport.do?action=print&param1=param1";             
    
        require(["dojo/io/iframe"], function(ioIframe){
            ioIframe.send({
                url: url,
    

    见handleAs:http://dojotoolkit.org/reference-guide/1.7/dojo/io/iframe.html 在你的测试用例中(使用handleAs:html),如果返回的数据不是内容类型的text / html,它将被丢弃 - 在尝试将text / plain转换为实际的html文档之后

                handleAs: "text"
            }).then(function(data){
                //It only works when my page returns the html message "Empty report"
                $('#button').show();
                $('#loadingImage').hide();
            }, function(err){
            });
        }); 
    }
    
    dojo.addOnLoad(function() {
    
    // this will create a disabled dojo button
    require(["dijit/form/Button"], function(dijitButton) {
      var domNode = dojo.byId('button');
      var btn = new dijitButton({
         diabled: true,
         id: 'PDFBUTTON',
         label: domNode.innerHTML // default behavior even so, for show here
      }, domNode);
    
      // showcase:
      var enabled = true;
      dijit.byId('PDFBUTTON').set("disabled", !enabled);
    
    });
    
    }