如何通過彈出另存爲窗口將kendoui dataviz圖表導出爲（.png）或（.jpg）圖像格式？

Question

我正在使用kendoui dataviz圖表，我需要將這些圖表導出爲（.png）或（.jpg）圖像格式。 基本上kendoui的dataviz圖表有一個內置的方法'svg（）'。

'svg（）'返回當前圖表的SVG表示。返回的字符串是一個獨立的SVG文檔。

例

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

現在 svgText包含圖表image..can人的細節告訴我如何將這些數據轉換爲實際的圖像格式，並彈出一個 另存爲提示???

代碼示例：我想這一點，但它並沒有提示任何 '另存爲' 彈出

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

Answer 1

更新2

圖表現在包括各種導出選項 - PNG，SVG和矢量PDF。請參閱Export demo以供參考。

UPDATE

圖表目前已經獲得導出圖像內置方法（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

Answer 2

U可以做到這樣。 對於這種方法你需要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); 

     } 
    }