导出数据

Exporter 包支持将数据导出到各种文件格式。它支持原生 XSLX、Excel XML 以及 HTML 和 CSV/TSV（逗号/制表符分隔值）格式。

该包未捆绑在 Ext JS 框架中，但很容易要求进入您的应用程序。无论您使用 Sencha Cmd 生成的应用程序还是使用您自己设计的应用程序结构，包括 Exporter 代码只需要几个步骤。

注意：本指南涵盖了 Ext JS 6.2+ SDK 的高级版本中捆绑的导出器包。

要求

Ext JS

Exporter 适用于 Sencha Ext JS 6.2 的经典工具包和现代工具包。

Sencha Cmd

不需要 Sencha Cmd 来使用 Exporter。但是，使用 Cmd 允许您通过应用程序的 app.json 文件无缝地包含 Exporter 包。

安装

使用 Sencha Cmd 的 Exporter

Exporter 提供了完整的源代码，这些源代码以一种便于部署到应用程序的包文件夹中的方式打包。

要在应用程序中包含 Exporter，只需修改应用程序根目录中的 app.json 文件以要求 Exporter 包

{

    "name": "YourApp",

    "requires": [

        "exporter"

    ],

    "id": "391a5ff6-2fd8-4e10-84d3-9114e1980e2d"

}

该包同时支持经典工具包和现代工具包，因此不需要依赖于工具包的配置。

在没有 Sencha Cmd 的情况下使用 Exporter

SDK 包含 Exporter 代码的编译版本，可供不使用 Sencha Cmd 的人使用。要以这种方式包含 Exporter，请从您的索引页面链接以下资产

{unzippedFolder}/packages/exporter/build/{toolkit}/exporter.js

使用 Exporter

该软件包提供了一个网格插件和类，用于生成文件，也可以独立使用。

网格插件

它允许网格数据导出到软件包中提供的各种文件格式。

该插件向网格组件添加了两个新方法

• saveDocumentAs：此函数将保存导出的文件

• getDocumentData：返回导出文档内容

这两个函数都接受一个配置对象作为参数

• type：这是导出器类型（默认为excel）。

• title：设置一个标题，该标题显示在导出文档中列标题上方。

• fileName：已保存文件的文件名。

{
    xtype: 'grid',

    plugins: 'gridexporter',

    columns: [{
        dataIndex: 'value',
        text: 'Total',
        exportStyle: {
            format: 'Currency',
            alignment: {
                horizontal: 'Right'
            }
        }
    }]
}

// later in an event listener
grid.saveDocumentAs({
    type: 'xlsx',
    title: 'My export',
    fileName: 'myExport.xlsx'
});

网格列中有以下配置

• ignoreExport 设置为 true 以忽略该列的数据导出

• exportStyle 允许你设置该列中导出数据的格式

exportStyle 可以定义为一个单一对象，所有可用的导出器都将使用该对象

{
    xtype: 'datecolumn',
    dataIndex: 'date',
    text: 'Date',
    width: 120,

    exportStyle: {
        alignment: {
            horizontal: 'Right'
        },
        font: {
            bold: true
        },
        format: 'Short Date'
    }
}

它也可以定义为一个对象数组，每个对象都有一个“type”属性，该属性指定它适用的导出器

{
    xtype: 'numbercolumn',
    dataIndex: 'price',
    text: 'Price',

    exportStyle: [{
        type: 'html', // used by the html exporter
        format: 'Currency',
        alignment: {
            horizontal: 'Right'
        },
        font: {
            italic: true
        }
    },{
        type: 'csv', // used by the csv exporter
        format: 'General'
    }]
}

当使用数组形式时，如果第一个条目没有“type”属性，它将用于没有匹配类型条目的导出器。

{
    xtype: 'numbercolumn',
    dataIndex: 'price',
    text: 'Price',

    exportStyle: [{
        // no "type" defined means this is the default
        format: 'Currency',
        alignment: {
            horizontal: 'Right'
        },
        font: {
            italic: true
        }
    },{
        type: 'csv', // only the CSV exporter has a special style
        format: 'General'
    }]
}

透视网格插件

此插件是pivot软件包的一部分，但使用导出器导出数据。透视网格的聚合和左轴维度上提供了上一部分中描述的网格列使用的exportStyle配置。

{
    xtype: 'pivotgrid',

    plugins: 'exporter',

    matrix: {

        leftAxis: [{
            dataIndex: 'employee',
            header: 'Employee',
            exportStyle: {
                font: {
                    bold: true
                }
            }
        }],

        aggregate: [{
            dataIndex: 'price',
            header: 'Total',
            aggregator: 'sum',
            exportStyle: {
                format: 'Currency',
                alignment: {
                    horizontal: 'Right'
                },
                font: {
                    italic: true
                }
            }
        }]

        // ... more configs
    }
}

导出器

导出器的基类是 Ext.exporter.Base。如果需要一个新的导出器，则可以定义一个新的类，该类扩展 Base 类。

Ext.define('App.exporter.Pdf', {
    extend: 'Ext.exporter.Base',
    alias: 'exporter.pdf',

    fileName: 'export.pdf',
    binary: true,

    getContent: function(){
        // generate pdf content and return it back
    }

});

新的导出器将可用于网格和透视网格导出器插件。

// in an event listener
grid.saveDocumentAs({
    type: 'pdf',
    title: 'My export',
    fileName: 'myExport.pdf'

    // ... other pdf specific configs
});

在某些情况下，需要将不来自网格面板或透视网格的表格数据导出到文件。这可以通过独立使用可用的导出器来实现。

var exporter = Ext.Factory.exporter({
    type: 'excel',
    data: {
        columns: [{
            text: 'Vacation',
            columns: [
                { text: 'Month', width: 200, style: { alignment: { horizontal: 'Right' } } },
                { text: 'Days', style: { format: 'General Number' } }
            ]
        }],
        groups: [{
            text: 'Employees',
            groups: [{
                text: 'Adrian',
                rows: [{
                    cells: [
                        { value: 'January' },
                        { value: 2 }
                    ]
                },{
                    cells: [
                        { value: 'July' },
                        { value: 10 }
                    ]
                }],
                summaries: [{
                    cells: [
                        { value: 'Total' },
                        { value: 12 }
                    ]
                }]
            },{
                text: 'John',
                rows: [{
                    cells: [
                        { value: 'March' },
                        { value: 4 }
                    ]
                },{
                    cells: [
                        { value: 'May' },
                        { value: 4 }
                    ]
                },{
                    cells: [
                        { value: 'July' },
                        { value: 2 }
                    ]
                }],
                summaries: [{
                    cells: [
                        { value: 'Total' },
                        { value: 10 }
                    ]
                }]
            }],
            summaries: [{
                cells: [
                    { value: 'Grand total' },
                    { value: 22 }
                ]
            }]
        }]
    }
});
// save the file
exporter.saveAs().then( function() { exporter.destroy(); } );

文件保存

单例 Ext.exporter.File 包含用于文件操作的函数。导出器使用它将生成的文件保存在最终用户机器上。一些现代浏览器允许通过 Blob 本地保存文件，但其他浏览器不支持此功能。为了解决这个问题，生成的 file 内容被发送到服务器，并以适当的标头返回，这些标头将触发文件下载。执行此操作的默认服务器在 Ext.exporter.File#property-url 中定义，它转到 https://exporter.sencha.com，但也可以使用内部服务器。

查看导出器包中的 server 文件夹，了解服务器脚本的 Node 和 PHP 实现。