Chart.js转图片经Ajax传入PHPExcel无显示问题求助

问题原因 #

你当前的方案不可行，核心问题在于：canvas.toDataURL()返回的是base64编码的Data URI（格式如data:image/png;base64,xxxxxx），但PHPExcel的setPath()方法要求传入的是本地文件系统的物理路径，而非字符串格式的编码数据，因此直接传入base64内容无法被识别，导致Excel中无图片显示。

正确实现方式 #

前端代码（调整优化） #

确保图表完全渲染后再获取图片数据，同时可移除Data URI前缀减少传输量：

// 初始化Chart.js图表
var chart = new Chart(document.getElementById('chart1'), {
    // 你的图表配置项
    type: 'bar',
    data: {},
    options: {}
});

// 等待图表渲染完成后执行
chart.rendered.then(function() {
    var canvas = document.getElementById('chart1');
    var imgData = canvas.toDataURL('image/png', 1);
    // 移除base64前缀，仅保留编码内容
    imgData = imgData.replace('data:image/png;base64,', '');

    $.ajax({
        type: "POST",
        url: "?f=excel_customer",
        data: { imgData: imgData },
        success: function(response) {
            console.log(response);
        }
    });
});

后端PHPExcel处理（两种可选方案） #

方案1：保存为临时文件（兼容所有PHPExcel版本）

将base64解码后写入临时文件，再传入文件路径：

if(isset($_POST['imgData'])) {
    $imgBase64 = $_POST['imgData'];
    // 解码base64数据
    $imgContent = base64_decode($imgBase64);
    // 创建唯一临时文件路径
    $tempFilePath = sys_get_temp_dir() . '/chart_' . uniqid() . '.png';
    // 将解码内容写入临时文件
    file_put_contents($tempFilePath, $imgContent);

    $objDrawing = new PHPExcel_Worksheet_Drawing();
    $objDrawing->setName('chart');
    $objDrawing->setDescription('chart');
    // 传入临时文件路径
    $objDrawing->setPath($tempFilePath);
    $objDrawing->setOffsetX(15);
    $objDrawing->setOffsetY(15);
    $objDrawing->setCoordinates('B2');
    $objDrawing->setWidth(90);
    $objDrawing->setHeight(90);
    $objDrawing->setWorksheet($objPHPExcel->getActiveSheet());

    // 生成Excel后自动删除临时文件（可选）
    register_shutdown_function(function() use ($tempFilePath) {
        if(file_exists($tempFilePath)) {
            unlink($tempFilePath);
        }
    });
}

方案2：直接使用图片资源（无需临时文件，更高效）

若PHPExcel版本支持，可将解码后的内容转为GD资源直接传入：

if(isset($_POST['imgData'])) {
    $imgBase64 = $_POST['imgData'];
    // 解码并创建GD图片资源
    $imgContent = base64_decode($imgBase64);
    $imgResource = imagecreatefromstring($imgContent);

    $objDrawing = new PHPExcel_Worksheet_Drawing();
    $objDrawing->setName('chart');
    $objDrawing->setDescription('chart');
    // 直接传入图片资源，无需文件路径
    $objDrawing->setImageResource($imgResource);
    $objDrawing->setOffsetX(15);
    $objDrawing->setOffsetY(15);
    $objDrawing->setCoordinates('B2');
    $objDrawing->setWidth(90);
    $objDrawing->setHeight(90);
    $objDrawing->setWorksheet($objPHPExcel->getActiveSheet());

    // 释放GD资源
    imagedestroy($imgResource);
}

注意事项 #

• 确保PHP配置中post_max_size和upload_max_filesize值足够大，避免因base64数据过大导致接收失败。
• 必须等待Chart.js图表完全渲染后再调用toDataURL，否则可能获取到空白图片。
• 使用临时文件时，需确保目标目录有写入权限，系统临时目录（sys_get_temp_dir()）一般默认具备权限。

内容的提问来源于stack exchange，提问作者Unknown