extjs - 以 PNG/PDF/XLS 文件导出 Ext-JS 6 图表

Question

我使用 ext js 6 创建了 3D 图表。我想将图表保存为 PNG/PDF/XLS 文件。您能否告诉我如何将图表图像保存为 PNG/PDF/XLS 文件。

谢谢

Answer 1

将图表导出为 png fiddle :

function saveBase64AsFile(base64, fileName) {
    var link = document.createElement("a");
    link.setAttribute("href", base64);
    link.setAttribute("download", fileName);
    link.click();
}

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var chart = Ext.create('Ext.chart.CartesianChart', {
            renderTo: document.body,
            width: 500,
            height: 500,
            flipXY: true,
            store: {
                fields: ['name', 'g1', 'g2'],
                data: [{
                    "name": "Item-0",
                    "g1": 18.34,
                    "g2": 0.04
                }, {
                       "name": "Item-1",
                       "g1": 2.67,
                       "g2": 14.87
                       }, {
                       "name": "Item-2",
                       "g1": 1.90,
                       "g2": 5.72
                       }, {
                       "name": "Item-3",
                       "g1": 21.37,
                       "g2": 2.13
                       }, {
                       "name": "Item-4",
                       "g1": 2.67,
                       "g2": 8.53
                       }, {
                       "name": "Item-5",
                       "g1": 18.22,
                       "g2": 4.62
                       }, {
                       "name": "Item-6",
                       "g1": 28.51,
                       "g2": 12.43
                       }, {
                       "name": "Item-7",
                       "g1": 34.43,
                       "g2": 4.40
                       }, {
                       "name": "Item-8",
                       "g1": 21.65,
                       "g2": 13.87
                       }, {
                       "name": "Item-9",
                       "g1": 12.98,
                       "g2": 35.44
                       }, {
                       "name": "Item-10",
                       "g1": 22.96,
                       "g2": 38.70
                       }, {
                       "name": "Item-11",
                       "g1": 0.49,
                       "g2": 51.90
                       }, {
                       "name": "Item-12",
                       "g1": 20.87,
                       "g2": 62.07
                       }, {
                       "name": "Item-13",
                       "g1": 25.10,
                       "g2": 78.46
                       }, {
                       "name": "Item-14",
                       "g1": 16.87,
                       "g2": 56.80
                       }]
            },

            //set legend configuration
            legend: {
                docked: 'right'
            },

            //define the x and y-axis configuration.
            axes: [{
                type: 'numeric',
                position: 'bottom',
                grid: true,
                minimum: 0
            }, {
                   type: 'category',
                   position: 'left'
                   }],

            //define the actual bar series.
            series: [{
                type: 'bar',
                xField: 'name',
                yField: ['g1', 'g2'],
                axis: 'bottom',
                // Cycles the green and blue fill mode over 2008 and 2009
                // subStyle parameters also override style parameters
                subStyle: {
                    fill: ["#115fa6", "#94ae0a"]
                }
            }]
        });

        setTimeout(function () {
            saveBase64AsFile(chart.getImage("stream").data, "export.png");
        }, 1000);
    }
});