ExtJS的出口在IE8

擅長

ExtJS的GridPanel中導出到Excel在Firefox和Chrome，但不是IE（甚至IE8也）做工精細ExtJS的出口在IE8

請提前

來源

2011-07-25 MNR

您使用的是什麼版本的extjs？你用什麼插件導出？ –

可能有助於添加一小段代碼。 – Chewpers

我提供建議

謝謝在ExtJS 4中爲網格編譯了一種插件。它可以幫助您製作可打印的版本和導出到Excel。它精確地輸出你看到的內容，並且它也適用於列渲染器。包括此腳本：

/** 
* Export grid data. Based on: 
* http://www.sencha.com/forum/showthread.php?125611-data-download-function-from-Grid-and-Chart 
* http://www123.ddo.jp/grid/array-grid.js 
* http://edspencer.net/2009/07/extuxprinter-printing-for-any-ext.html 
* @param {Object} opt (optional) 
* format: 'html', 
* headers: true, 
* stylesheetPath: 'css/print.css' 
*/ 
Ext.grid.GridPanel.prototype.exportData = function(opt){ 
    opt=opt||{}; 

    //Get the array of columns from a grid 
    var me=this, columns=[], data=[]; 
    Ext.each(me.columns, function(col) { 
     if (col.hidden != true && col.dataIndex) columns.push(col); 
    }); 
    //Sometimes there's no colum header text (when using icons) 
    Ext.each(columns, function(column) { 
     if (!column.text || column.text == '&nbsp;') { 
      column.text=column.dataIndex; 
     } 
    }); 

    //Build a useable array of store data for the XTemplate 
    me.store.data.each(function(item) { 
     var convertedData = {}; 

     //apply renderers from column model 
     Ext.iterate(item.data, function(key, value) { 
      Ext.each(columns, function(column) { 
       if (column.dataIndex == key) { 
        if (column.renderer) { 
         if (column.xtype==='templatecolumn') { 
          convertedData[key] = column.renderer(value, {}, item); 
         } else { 
          convertedData[key] = column.renderer(value, undefined, undefined, undefined, columns.indexOf(column), undefined, me.view); 
         } 
        } else { 
         convertedData[key] = value; 
        } 
        if (typeof convertedData[key]==='string') { 
         convertedData[key]=Ext.util.Format.htmlToText(convertedData[key]); 
        } 
        return false; 
       } 
      }); 
     }); 

     data.push(convertedData); 
    }); 

    //generate finale template to be applied with the data 
    var headings=[], body=[], str; 
    if (opt.format==="html") { 
     headings=opt.headers?new Ext.XTemplate(
      '<tr>', 
       '<tpl for=".">', 
       '<th>{text}</th>', 
       '</tpl>', 
      '</tr>' 
     ).apply(columns):''; 
     body=new Ext.XTemplate(
      '<tr>', 
       '<tpl for=".">', 
       '<td>\{{dataIndex}\}</td>', 
       '</tpl>', 
      '</tr>' 
     ).apply(columns); 

     var str=[ 
      '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">', 
      '<html>', 
       '<head>', 
       '<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />', 
       opt.stylesheetPath?'<link href="' + opt.stylesheetPath + '" rel="stylesheet" type="text/css" media="screen,print" />':'', 
       me.title?'<title>' + me.title + '</title>':'', 
       '</head>', 
       '<body>', 
       '<table>', 
       Ext.String.format('{0}\n<tpl for=".">{1}\n</tpl>', headings, body), 
       '</table>', 
       '</body>', 
      '</html>' 
     ].join('\n'); 
    } else { 
     Ext.each(columns, function(v) { 
      headings.push(Ext.util.Format.htmlToText(v.text)); 
      body.push('{'+v.dataIndex+'}'); 
     }); 
     headings=opt.headers?headings.join('\t'):''; 
     body =body.join('\t'); 

     var str=Ext.String.format('{0}\n<tpl for=".">{1}\n</tpl>', headings, body); 
    } 

    //console.log('toText', columns, data, headings, body, str); 
    return new Ext.XTemplate(str).apply(data); 
};

現在，打印網格，像這樣：

var html=grid.exportData({ 
    format: 'html', 
    headers: true, 
    stylesheetPath: 'resources/css/print.css' 
}); 

var name = grid.getXType ? Ext.String.format("print_{0}_{1}", grid.getXType(), grid.id) : "print"; 

name=name.replace(/\W*/g, ''); //IE disallows spaces and other special characters in window name (the second argument). You need to remove them before passing as argument. 

var win = window.open(undefined, name); 
win.document.write(html); 
win.document.close(); 
win.print();

到Excel的出口要求您網格導出到製表符分隔字符串。您發佈到服務器（的download.php）這串

var html=grid.exportData({ 
    format: 'txt', 
    headers: true, 
    stylesheetPath: 'resources/css/print.css' 
}); 

var form = Ext.DomHelper.append(document.body, { 
    tag: 'form', 
    style: 'display:none', 
    action: 'download.asp', 
    method: 'post', 
    cn:[{ 
     tag:'textarea', 
     name:'body', 
     html:html 
    },{ 
     tag:'input', 
     name:'filename', 
     value: grid.title||'download' 
    },{ 
     tag:'input', 
     name:'extension', 
     value:'xls' 
    }] 
}); 
form.submit(); 
document.body.removeChild(form);

隨後的download.php將需要回聲出貼體。使用：

Content-Disposition=attachment;filename=file.xls 
Content-Type=application/vnd.ms-excel

現在，您的瀏覽器應該顯示提示，要求您保存xls文件。

來源

2012-11-26 21:54:06

我做了一個小的修改，以在庫Ext.ux.Exporter的代碼，改變此：

this.getEl().child('a', true).href = 'data:application/vnd.ms-excel;base64,' + Ext.ux.Exporter[config.exportFunction](this.component, null, config);

通過這樣的：

var domA = this.getEl().child('a', true), 
      string64 = Ext.ux.Exporter[config.exportFunction](this.component, null, config); 

     domA.href = '#'; 
     domA.rel = string64; 

     this.getEl().child('a').addListener({ 
      'click':{ 
       fn: function(){ 
        __exportExcel(this.getEl().child('a', true).rel); 
       }, 
       scope: this 
      } 
     });

然後，使用「髒」的功能__exportExcel

__exportExcel = function(base64){ 

    Ext.DomHelper.useDom = true; 
    var form = Ext.DomHelper.append('grid1', { 
     tag:  'form', 
     style: 'display:none', 
     action: 'download.php', 
     method: 'post', 
     cn:[{ 
      tag:'textarea', 
      name:'body', 
      html: base64 
     },{ 
      tag:'input', 
      name:'filename', 
      value: grid.title||'download' 
     },{ 
      tag:'input', 
      name:'extension', 
      value:'xls' 
     }] 
    }); 
    form.submit(); 
    document.getElementById('grid1').removeChild(form); 
    return false; 
}

發送base64字符串到php文件download.php

<?php 
header('Content-type: application/ms-excel'); 
header('Content-Disposition: attachment; filename=file.xls'); 

echo base64_decode($_POST['body']); 

?>

這些更改可在IE8和其他瀏覽器中使用。

來源

2012-11-28 03:53:36 Galled

ExtJS的出口在IE8

回答

相關問題