如何通过弹出另存为窗口将 kendo ui dataviz 图表导出为 (.png) 或 (.jpg) 图像格式？

Posted 2023-05-07

【中文标题】如何通过弹出另存为窗口将 kendo ui dataviz 图表导出为 (.png) 或 (.jpg) 图像格式？

【英文标题】：How to export kendoui dataviz chart to (.png) or (.jpg) image format by poping up Save-As window?

【发布时间】：2012-02-29 15:24:53

【问题描述】：

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

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

示例

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

现在 svgText 包含图表图像的详细信息..谁能告诉我如何将这些数据转换为实际图像格式并弹出 另存为提示？

代码示例：我试过这个，但它没有提示任何“SaveAs”弹出窗口

     <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>                     

【问题讨论】：

实际问题在于 'img' 标签的 'src' 属性的表示，因为...它使用 'base64' 格式加载图像

嘿，你找到任何解决方案了吗..？看看这个问题/答案：***.com/questions/2483919/…

【参考方案1】：

更新 2

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

更新

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

var img = chart.imageDataURL();

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

另见：API Reference

原文如下：

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

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

你可以在 GitHub 上找到演示：

https://github.com/telerik/kendo-examples-asp-net/tree/master/chart-inkscape-export

【讨论】：

这不准确。您可以通过CHART.svg() 获取图表的 svg，将其转换为画布，并且有很多画布到 png 库 (code.google.com/p/canvg)。 Canvas 通过toDataUrl() 转换为base64。

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

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

【参考方案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);