Question

我在extjs面板组件中放置了多个图表（highcharts）。我想将div中的所有图表和extjs组件下载为图像。我使用了html canvas，它只下载了extjs组件。图像中未捕获高图组件。有人可以帮忙吗？

Answer 1

Agi La我不知道extjs，但由于我在下载highcharts图表时遇到了问题，我会解释我为了得到它们所做的一切。

首先，确保您拥有 rgbcolor.js 和 canvg.js 库。

其次，您可以使用此脚本进行AJAX调用：

<script>
        $( document ).ready(function(){
            var svg = document.getElementById('$this->id_chart').children[0].innerHTML;
            canvg(document.getElementById('$this->id_canvas'),svg);
            var img = $this->id_canvas.toDataURL('image/png'); //img is data:image/png;base64
            img = img.replace('data:image/png;base64,', '');
            $.ajax({
              type: 'POST',
              url: 'AJAX/AJAX1.php', 
              data: {INFO1: img , INFO2: '$this->file_name_export' }                   
            });
        });
</script>

<script type='text/javascript' src='JS/rgbcolor.js'></script>    
<script type='text/javascript' src='JS/canvg.js'></script>

<!-- canvas tag to convert SVG -->
<canvas id='$this->id_canvas' style='display:none;'></canvas>

其中$ this-＆gt; id_chart是您放置高图的div的ID，$ this-＆gt; file_name_export是您要为已保存的图表指定的名称。

在您的Ajax文件中，您必须拥有：

$img        = $_POST['INFO1'];
$fileName   = $_POST['INFO2']. '.jpeg';

$data = str_replace(' ', '+', $img);
$data = base64_decode($data);
$im = imagecreatefromstring($data);

if ($im !== false) {
    // Save image in the specified location
    imagejpeg($im, "../temp/" .$fileName,100);
    imagedestroy($im);               
}

您可以看到here原始来源，它在按钮中使用此代码，而不是像我一样自动下载。

Highchart和HTMLCanvas

1 个答案: