ExtJS:从Ajax发布请求响应中获取文件

时间:2018-06-06 13:00:17

标签: javascript php extjs fpdf

我尝试从extjs应用程序生成pdf文件。单击我的导出按钮时,将触发此Ajax请求

Ext.Ajax.request({
    url: 'data/apppdf.php?class=Export&action=composerCSV',
    method: 'POST',
    timeout: 1200000,
    params: {
        id: id
    },

    success: function (response, opts) {
        // i don't know what to do here
    }
});

在我的PHP文件中,我使用FPDF库制作pdf文件,如此

$pdf = new FPDF();
// fill my file
return $pdf->Output(null, "rapport" . date('Y-m-d_H:i:s'));

我的请求成功后,我的脚本文件返回结束,如何让用户可以使用(如何获取打开/保存弹出窗口,并提供有效的pdf文件)?

2 个答案:

答案 0 :(得分:0)

执行此操作的一种方法是将文件保存在服务器上,输出()函数中的第一个参数为“F”:

$folder = '../';
$dt = date('Y-m-d_H:i:s');
$pdf->Output("F", $folder . "rapport" . $dt);

return $folder . "rapport" . $dt;

由于您现在知道了路径和文件名,因此您可以返回此字符串,并在您的ajax成功函数中随意使用它。 请注意,我首先存储日期时间,因为返回时间可能与创建文件名时的返回时间不同。 有关详细信息,请查看文档中的“输出”页面:http://www.fpdf.org/en/doc/output.htm

您的Ajax成功函数可以是这样的:

success: function (response, opts) {
    $('div.yourdiv').html(response);
}

这将用来自php文件的响应替换div.yourdiv中的所有html。在这种情况下,指向您文件的链接。

另一个例子:

success: function (response, opts) {
    location.href = response;
}

这会在创建后将用户重定向到文件。

这是一种方法,我确信可以不保存文件。

答案 1 :(得分:0)

我通常使用这种方法,尽管可能存在更好的解决方案:

  • 定义浏览窗口
  • 在服务器上生成PDF文件
  • 下载和预览PDF文件

ExtJS部分:

val r = "<a href =\"([^\"]*)\"".r

PHP部分:

Ext.define('Test.ReportWindow', {
    extend: 'Ext.window.Window',

    xfilename: '',
    xtitle: '',

    layout : 'fit',
    width: 1200,
    height: 800,
    maximizable: true,

    initComponent: function() {
        var me = this;

        me.callParent(arguments);
        me.title = me.xtitle;
        me.add(
            {
            xtype: "box",
            autoEl : {tag : "iframe", src : me.xfilename}
            }
        );
    }
});

Ext.onReady(function(){

    Ext.Ajax.request({
        url: 'data/apppdf.php?class=Export&action=composerCSV',
        method: 'POST',
        timeout: 1200000,
        params: {
            id: id
        },

        success: function (response, opts) {
            var r = Ext.JSON.decode(response.responseText);
            if (r.success == true) { 
                var win = Ext.create('Test.ReportWindow', {
                    xfilename: r.filename,
                    xtitle: 'Show PDF file'
                });
                win.show();
            } else {
                Ext.Msg.alert('Attention', r.errmsg);       
            };
        }
    });
}); 

注意:使用ExtJS 4.2进行测试。