EXTJS 如何显示/打开作为服务器响应结果的 PDF 文件

Question

如何打开/查看/下载服务器返回的PDF文件。

我做了一些研究，但找不到任何可以适用于我的场景的东西。我在网格下有一个按钮打印，它将击中服务器，服务器将创建一个PDF文件并将其发回。

当我使用网址时

本地主机/总部/分支传输/下载重印文件/27500031/275

在浏览器地址栏上，我可以立即成功打开pdf文件。但是，当我单击按钮时不会。我收到一条警告消息，这是非常隐蔽的：

[WARN] 无法解析服务器返回的 JSON

这是我用于创建文件的 .Net 代码。

public Stream DownloadReprintFile(string transferId, string branchId)
    {
        string fileName = GetFullReprintFilePath(transferId, branchId);
        if (!File.Exists(fileName))
        {
            Reprint(transferId, branchId);
        }
        WebOperationContext.Current.OutgoingResponse.ContentType = "application/pdf";
        return File.OpenRead(fileName);
    }

存储、代理和 JSON 读取器的代码

    Ext.define('BranchTransferDashboard.store.PrintStore', {
    extend: 'Ext.data.Store',
    requires: [
        'BranchTransferDashboard.model.PrintModel',
        'Ext.data.proxy.Rest'
    ],
    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'PrintStore',
            model: 'BranchTransferDashboard.model.PrintModel',
            proxy: {
                type: 'rest',
                headers: {
                    Accept: 'application/pdf',
                    'Content-Type': 'application/pdf'
                },                
            }
        }, cfg)]);
    }
});

打印按钮单击代码

console.log('Print Button Click');
var printStore = Ext.getStore('PrintStore');
var url = BranchTransferDashboard.globals.url + 'branchTransfer/downloadreprintfile/'+ this.activeRecord.transferId + '/' + this.activeRecord.sender;
printStore.proxy.url = url;
console.log(url);
printStore.load({
    scope   : this,
    callback: function(records, operation, success) {
        if (success){
        }
    }
});

Answer 1

我做过类似的事情，我使用iframe。我在 DOM 中隐藏了一个 iframe，当用户触发下载时，我将 iframe 的 src 属性设置为生成响应的服务。您还需要在服务器上设置Content-Disposition标头。响应标头应如下所示：

Content-Disposition: attachment; filename="Report.pdf" 

Answer 2

以下是 ExtJS 代码，它运行良好并弹出打开 PDF 文件。

//var printStore = Ext.getStore('PrintStore');
var url = MyApp.globals.url + 'myApp/downloadreprintfile/'+ this.activeRecord.transferId + '/' + this.activeRecord.sender;
//printStore.proxy.url = url;
var printPanel = Ext.create('Ext.form.Panel', {
  title:'Print Panel',
  id: 'printTabPanel',
  standardSubmit: true,
  layout: 'fit',
  timeout: 120000
});
printPanel.submit({
             target : '_new',
             url  : url
            });

附言我的请求是 POST 请求。

Answer 3

服务器端

在服务器端生成报告后，应设置以下标头

headers.setContentType(MediaType.parseMediaType("application/pdf"));
headers.setContentDispositionFormData("inline", "Report.pdf");

客户端：以下代码用于使用 extjs 下载文件。将以下代码添加到方法中并调用此按钮操作.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 here will automatically
            //log the user out as it should
        }
    });
}