如何在 excel 中导出图表？

Question

我正在尝试将从数据库中获取的数据显示为条形图，然后将数据与图表图像一起导出到 excel。我可以成功显示条形图，但我无法将数据与图表一起导出到 excel。

有什么方法可以通过单击按钮将数据和图表导出到 excel 中？

这是我的 javascript 代码

var fetcheddata = '';
var proddata = '';
$( document ).ready(function (){
    $('#chart-container-1').hide();
     $('#chart-container').show();
     $.ajax({
        url:"index.php?r=jobready/get-data",
        method: "POST",
        success: function (data) {
                fetcheddata = data;
                console.log(data);
                var data_e = JSON.parse(fetcheddata);
                console.log(data_e);
                var rating = [];
                var variety = [];
                var quality = [];

                for (var i in data_e) {
                    rating.push(data_e[i].ratingid);
                    variety.push(data_e[i].variety);
                    quality.push(data_e[i].quality);
            }
            console.log("Rating:" +rating);
            console.log("Variety:" +variety);
            console.log("Quality:" +quality);

           var chartdata = {
                labels: rating,
                datasets: [{
                        label: 'Variety',
                        backgroundColor: 'rgb(255, 0, 0)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: variety
                    },
                    {
                        label: 'Quality',
                        backgroundColor: 'rgb(0, 0, 255)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: quality
                    }
                ]
            };

            var ctx = $("#mycanvas");

            var barGraph = new Chart(ctx, {
                type: 'bar',
                data: chartdata,
                options: {
                    barValueSpacing: 20,
                    title: {
                        display: true,
                        text: 'Variety',
                        fontSize: 20
                    },
                    scales: {
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: 'Product Id'
                            }
                        }],
                        yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: 'Amount'
                            },
                            ticks: {
                                beginAtZero: true
                            }
                        }]

                    }
                }
            });
        },
        error: function (data) {
            console.log(data);
        }
    });

    document.getElementById('download-pdf').addEventListener("click", downloadPDF);   
    $("#download-xls").click(function (e) {

});
    $('#product_sales').on("click",function(){
        $('#chart-container-1').show();
        $('#chart-container').hide();
        $.ajax({
        url:"index.php?r=jobready/get-product-data",
        method: "POST",
        success: function (data) {
                proddata = data;
                console.log(data);
                var data_e = JSON.parse(proddata);
                console.log(data_e);
                var flavour = [];
                var munch = [];
                var perk = [];
                var snickers = [];

                for (var i in data_e) {
                    flavour.push(data_e[i].flavour);
                    munch.push(data_e[i].munch);
                    perk.push(data_e[i].perk);
                    snickers.push(data_e[i].snickers);
            }
            console.log("flavour:" +flavour);
            console.log("munch:" +munch);
            console.log("perk:" +perk);
            console.log("snickers:" +snickers);

           var chartdata = {
                labels: flavour,
                datasets: [{
                        label: 'Munch',
                        backgroundColor: 'rgb(255, 0, 0)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: munch
                    },
                    {
                        label: 'Perk',
                        backgroundColor: 'rgb(0, 0, 255)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: perk
                    },
                    {
                        label: 'Snickers',
                        backgroundColor: 'rgb(0, 255, 0)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: snickers
                    }
                ]
            };

            var ctx = $("#mycanvas_1");

            var barGraph1 = new Chart(ctx, {
                type: 'bar',
                data: chartdata,
                options: {
                    barValueSpacing: 20,
                    title: {
                        display: true,
                        text: 'Products',
                        fontSize: 20
                    },
                    scales: {
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: 'Flavour'
                            }
                        }],
                        yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: 'Sales'
                            },
                            ticks: {
                                beginAtZero: true,
                                max: 700,
                                min: 0
                            }
                        }]

                    }
                }
            });
        },
        error: function (data) {
            console.log(data);
        }
    });
    });
});
function downloadPDF() {
        var canvas = document.querySelector('#mycanvas');
    //creates image
    var canvasImg = canvas.toDataURL("image/jpeg", 1.0);

    //creates PDF from img
    var doc = new jsPDF('landscape');
    doc.setFontSize(20);
    doc.text(15, 15, "Cool Chart");
    doc.addImage(canvasImg, 'JPEG', 10, 10, 280, 150 );
    doc.save('canvas.pdf');
}

我被卡在点击下载-xls jquery function。

Answer 1

所以，出于好奇，我只是看看你是否真的可以在前端从纯数据创建一个 excel 文件，令我惊讶的是，这就是我得到的。

有一篇关于代码项目的文章可以做到这一点。 我已将链接发布如下 - https://www.codeproject.com/Articles/1197349/Excel-Files-in-JavaScript-the-Simple-Way 。 您可以查看那里以获取更多详细信息。

希望这对您有所帮助。 但我仍然敦促您考虑在后端生成文件。