如何使用node js在pdf和excel中创建图表？

Question

创建折线图的 JavaScript 函数：

function TyLyReport() {
            var lineChartData = {
                labels : ["Jan","Feb","Mar"],
                datasets : [
                    {
                        label: 'Dataset 1',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        data : [1000, 2000, 2500],
                        fill: false
                    },
                    {
                        label: 'Dataset 2',
                        borderColor: '#FF4848',
                        backgroundColor: 'rgba(255, 72, 72, 0.2)',
                        data : [1016, 1800, 2900],
                        fill: false
                    }
                ]
            };

            var ctx = document.getElementById("canvas").getContext("2d");
            window.myLine = new Chart(ctx, {
                type: 'line',
                data: lineChartData,
                options: {
                    responsive : true,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });

            // Export chart image to Excel
            exportToExcel();
        }
 // Function to export chart image to Excel
        function exportToExcel() {
            var canvas = document.getElementById("canvas");
            var image = canvas.toDataURL("image/png");

            var workbook = new ExcelJS.Workbook();
            var worksheet = workbook.addWorksheet('Chart Image');
            var imageId = workbook.addImage({
                base64: image,
                extension: 'png',
            });
            worksheet.addImage(imageId, 'A1');

            workbook.xlsx.writeBuffer().then(function(buffer) {
                saveAs(new Blob([buffer]), 'chart_image.xlsx');
            });
        }

        // Call the TyLyReport function when the window loads
        window.onload = TyLyReport;

通过使用上面的代码，我可以下载Excel并单独导出图表图像，但图像不是在Excel内部创建的。任何人都可以指导我在Excel中导出吗？我需要将图像导出到Excel中，如下图所示

Answer 1

我不确定您发布的代码中到底发生了什么，因为未指定所使用的库版本。它可能确实有效，但图像几乎不可见，非常小，仅限于一个单元格 (A1) 并且透明。

为了最初可见，应该给图像指定宽度和高度 值，所以我采用了“将图像添加到单元格”中的解决方案。

由于问题中没有指定，所以我使用了所有库的最新版本； Chart.js v4 需要对配置对象进行一些更改。它还要求动画被禁用；另一种方法是使用

onComplete

处理程序在动画结束后设置图像的导出。

如果需要，我还添加了用于填充颜色（白色）背景的标准插件解决方案，因为默认的透明解决方案可能不够。

这是修改后的版本：

function TyLyReport() {
    var lineChartData = {
        labels : ["Jan","Feb","Mar"],
        datasets : [
            {
                label: 'Dataset 1',
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                data : [1000, 2000, 2500],
                fill: false
            },
            {
                label: 'Dataset 2',
                borderColor: '#FF4848',
                backgroundColor: 'rgba(255, 72, 72, 0.2)',
                data : [1016, 1800, 2900],
                fill: false
            }
        ]
    };

    var ctx = document.getElementById("canvas").getContext("2d");
    new Chart(ctx, {
        type: 'line',
        data: lineChartData,
        options: {
            responsive : true,
            animation: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        },
        plugins:[
            {
                beforeDraw(chart){ // White background in the exported image
                    const {ctx, canvas} = chart;
                    ctx.save();
                    ctx.fillStyle = '#FFF';
                    ctx.fillRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
                    ctx.restore();
                }
            }
        ]
    });

    // Export chart image to Excel
    exportToExcel();
}

// Function to export chart image to Excel
function exportToExcel() {
    const canvas = document.getElementById("canvas");
    const image = canvas.toDataURL("image/png").split(';base64,')[1];
    // see https://stackoverflow.com/a/63494628/16466946 (not required)

    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('Chart Image');
    const imageId = workbook.addImage({
        base64: image,
        extension: 'png',
    });
    worksheet.addImage(imageId,
        {
            tl: { col: 0, row: 0 },
            ext: { width: canvas.offsetWidth, height: canvas.offsetHeight}
        }
    );

    workbook.xlsx.writeBuffer().then(function(buffer) {
        saveAs(new Blob([buffer]), 'chart_image.xlsx');
    });
}

TyLyReport();

<div style="min-height: 60vh">
    <canvas id="canvas" style="background-color: #fff">
    </canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.4.0/exceljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

该代码片段似乎禁用了下载弹出窗口；它正在工作，在 jsFiddle 中。