Exporter 包

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

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

注意： 本指南涵盖了 Ext JS 6.2+ SDK Premium 版本中捆绑的 exporter 包。

要求

Ext JS

Exporter 可与 Sencha Ext JS 6.2+ 的经典和现代工具包一起使用。

Sencha Cmd

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

安装

将 Exporter 与 Sencha Cmd 结合使用

Exporter 随附完整源代码，这些源代码以易于部署到应用程序的 packages 文件夹的方式打包。

要将 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

该包提供了一个 grid 插件和一些类，这些类生成的文件也可以独立使用。

Grid 插件

它允许将 grid 数据导出为包中提供的各种文件格式。

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

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

• getDocumentData：返回导出的文档内容

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

• type：这是 exporter 类型（_默认为 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'
});

以下配置在 grid 列上可用

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

• exportStyle 允许您格式化该列上的导出数据

exportStyle 可以定义为单个对象，该对象将由所有可用的 exporter 使用

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

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

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

{
    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”属性，它将用于其类型没有匹配条目的 exporter。

{
    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 Grid 插件

此插件是 pivot 包的一部分，但使用 exporter 导出数据。grid 列使用的 exportStyle 配置和上一节中描述的配置在 pivot grid 的聚合轴和左轴维度上可用。

{
    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
    }
}

Exporter

exporter 的基类是 Ext.exporter.Base。如果需要新的 exporter，则可以定义一个新的类来扩展 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
    }

});

新的 exporter 将可用于 Grid 和 Pivot Grid Exporter 插件。

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

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

在某些情况下，不需要来自 grid panel 或 pivot grid 的表格数据也需要导出到文件。这可以使用可用的 exporter 独立实现。

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

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