javascript - 如何使用 ExtJS 4.2.1 下载 pdf 文件？

Question

我正在开发一个个人网站，我的资源中有一个 pdf。

我需要一个带有处理程序的按钮来在浏览器中保存 pdf 文件。我的应用程序只有客户端。

如何使用 Extjs 在浏览器中下载 pdf 文件？

Answer 1

以下代码用于使用 extjs 下载 pdf。添加以下代码应该为按钮操作调用。这将直接下载文件而不是在新选项卡中打开。确保服务器端有

服务器端

在服务器端生成报告后，您应该设置以下 header

header.set("application/pdf");

header.set("Content-disposition: inline; filename=Test.pdf");

客户端<强>1。在 View 中添加按钮

{
    xtype: 'button',
    text: 'Print PDF',
    cls: 'printPdfBtn',
    listeners: {
        click: 'printReport'
        //click: 'openReport'
    }
}

<强>2。在 Controller 中添加监听方法。

选项:1 使用隐藏的 iframe 下载 pdf 文件。

像这样使用 iframe:

/**
 * prints the file
 */
printReport: function () {
    var url = 'downloadURL';
    Ext.Ajax.request({
        url: url,
        method: 'GET',
        autoAbort: false,
        success: function(result) {
            if(result.status == 204) {
                Ext.Msg.alert('Empty Report', 'There is no data');
            } else if(result.status == 200) {
                Ext.DomHelper.append(Ext.getBody(), {
                    tag:          'iframe',
                    frameBorder:  0,
                    width:        0,
                    height:       0,
                    css:          'display:none;visibility:hidden;height:0px;',
                    src:          url
                });
            }
        },
        failure: function() {
            // failure action
        }
    });
}

从extjs forum复制答案

以下代码用于使用 extjs 下载文件。将以下代码添加到方法中并为按钮操作调用它。 PDF 将在新标签页中打开。

选项:2 在选项卡中打开 pdf。如果你想在新标签页中打开文件

    /**
 * open file in tab
 */
openReport: function () {
    var url = 'downloadURL';
    Ext.Ajax.request({
        url: url,
        method: 'GET',
        autoAbort: false,
        success: function(result) {
            if(result.status == 204) {
                Ext.Msg.alert('Empty Report', 'There is no data');
            } else if(result.status == 200) {
                var win = window.open('', '_blank');
                win.location = url;
                win.focus();
            }
        },
        failure: function() {
            // failure action
        }
    });
}