如何通过弹出“另存为”窗口将KendoUI DataViz图表导出为(.png)或(.jpg)图片格式？

Question

我正在使用kendoui dataviz charts，需要将这些图表导出为(.png)或(.jpg)图像格式。基本上，kendoui dataviz chart有一个名为'svg()'的内置方法。

'svg()'返回当前图表的SVG表示形式。返回的字符串是一个独立的SVG文档。

例如：

var chart = $("#chart").data("kendoChart");
var svgText = chart.svg();

现在，svgText包含了图表图像的详细信息。有人可以告诉我如何将这些数据转换为实际的图像格式，并弹出另存为提示框吗？

代码示例：我尝试过这个方法，但它没有弹出任何“另存为”提示框。

     <div id="example" class="k-content">
              <div class="chart-wrapper">
                  <div id="chart"></div>
                     <center>
                        <div>
                          <input type="button" value="click" onclick="disp();" />
                        </div>
                     </center>
                  <div>
      <canvas id="canvas"></canvas>
      </div>
        </div>
           </div>


          <script type="text/javascript">

            function disp() {
                var chart = $("#chart").data("kendoChart");
                var svgText = chart.svg();
                var c = document.getElementById('canvas');
                canvg(c,svgText);
                var img    = c.toDataURL("image/png");
                document.write('<img src="' + img + '"/>');
                window.win = open(imgOrURL);
                setTimeout('win.document.execCommand("SaveAs")', 100);
                }

              function createChart() {
                $("#chart").kendoChart({
                    theme: $(document).data("kendoSkin") || "default",
                    title: {
                        text: "Internet Users"
                    },
                    legend: {
                        position: "bottom"
                    },
                    chartArea: {
                        background: ""
                    },
                    seriesDefaults: {
                        type: "bar"
                    },
                    series: [{
                        name: "World",
                        data: [15.7, 16.7, 20, 23.5, 26.6]
                    }, {
                        name: "United States",
                        data: [67.96, 68.93, 75, 74, 78]
                    }],
                    valueAxis: {
                        labels: {
                            format: "{0}%"
                        }
                    },
                    categoryAxis: {
                        categories: [2005, 2006, 2007, 2008, 2009]
                    },
                    tooltip: {
                        visible: true,
                        format: "{0}%"
                    }
                });
            }

            $(document).ready(function () {
                setTimeout(function () {
                    createChart();

                },100);


                $(document).bind("kendo:skinChange", function (e) {
                    createChart();
                  });
             });
    <script>                     

- Trikarandas

---

实际问题在于“img”标签的“src”属性的表示方式，因为它使用“base64”格式加载图像。 - Trikarandas

嘿，你找到解决方案了吗？看看这个问题/答案：https://dev59.com/QnE95IYBdhLWcg3wDpcG - Asad Malik

Answer 1

更新 2

图表现在包括各种导出选项 - PNG、SVG 和矢量 PDF。请参考导出演示。

更新

图表现在具有获取导出图像（base64 编码）的内置方法：

var img = chart.imageDataURL();

我不知道有一种跨浏览器的方式可以显示“另存为”对话框。

另请参阅：API 参考 以下是原始回复：

无法在浏览器中导出图表图像。我们准备了一个演示，展示了如何使用 Inkscape 将 SVG 文档转换为 PNG/PDF。

演示应用程序是在 ASP.NET MVC 中实现的，但不依赖于任何其功能，可以移植到其他框架中。

您可以在 GitHub 上找到演示： https://github.com/telerik/kendo-examples-asp-net/tree/master/chart-inkscape-export

- Tsvetomir Tsonev

---

这不是很准确的。您可以通过 CHART.svg() 获取图表的 SVG，将其转换为画布，然后有许多画布转 PNG 库可用（https://code.google.com/p/canvg/）。 画布通过 toDataUrl() 转换为 base64。 - carter

该信息实际上已经过时。现在图表在支持Canvas的浏览器中提供直接图像导出。请参见上面的更新。 - Tsvetomir Tsonev

这里没有提到的一件事是，应该在图表完成加载之后从图表的数据绑定事件中调用imageDataURL()方法，因为在此之前不应该调用它。另外 - 我发现一个简单的解决方案是将整个图表包装在锚标记中，并将href设置为imageDataURL()。当然，这也需要将CSS文本装饰属性设置为none，否则图表中的所有文本都会被下划线覆盖。 - DanO

Answer 2

你可以这样做。 对于这种方法，你需要svg.dll 你可以从这个链接下载。

• http://svg.codeplex.com/releases/view/18884

Javascript：

var chart = $("#chart").data("kendoChart");
var svgString = escape(chart.svg());
    $.ajax({
        url: "/MyController/Sample",
        data: { svg: svgString },
        async: false,
        type: 'Post',
        success: function (data) {
            window.location = "/MyController/getPdf";
        }
    });

控制器：

    [HttpPost]
    [ValidateInput(false)]
    public void Sample(string svg)
    {
        var svgText = System.Web.HttpUtility.UrlDecode(svg);
        Session["chrtData"] = svgText;
    }

    public void getPdf()
    {
        string svgText = Session["chrtData"].ToString();

        var byteArray = Encoding.ASCII.GetBytes(svgText);
        using (var stream = new MemoryStream(byteArray))
        {
            var svgDocument = Svg.SvgDocument.Open(stream);
            //First Way

            var bitmap = svgDocument.Draw();
            MemoryStream docMemStream = new MemoryStream();
            bitmap.Save("D:\\hi.png", System.Drawing.Imaging.ImageFormat.Png);

        }
     }

- user1134478