HighChats報表使用C#mvc導出本地圖片

最近工作使用了HighCharts，要用到保存成圖片功能，但是是內部使用，不允許連接外網，於是就學習了下highcharts生成本地圖片。

highcharts有一個exporting.js來負責導出成圖片功能。

 

1.先在頁面引用兩個js。我使用的是exporting.src.js，方便查看源碼，這里需要修改一點點東西。

要顯示中文的話，需要在exporting.src.js最末尾處加上以下設置，或者直接修改初始化的默認值。

Highcharts.setOptions({
　　lang: {
　　　　printChart: "打印圖表",
　　　　downloadJPEG: "下載JPEG 圖片",
　　　　downloadPDF: "下載PDF文檔",
　　　　downloadPNG: "下載PNG 圖片",
　　　　downloadSVG: "下載SVG 矢量圖",
　　　　exportButtonTitle: "導出圖片"
　　}
});

 

2.打開exporting.src.js，找到defaultOptions.exporting屬性里的url，這里發送了一個請求到highcharts官網，然后處理成圖片之后再返回回來，並不是使用js生成的圖片。

將官方的請求地址修改成我們代碼的地址。

它這里是生成了一個form發送了請求之后又清除了這個form，發送的數據就是svg數據，以及文件名寬度等數據信息。

highcharts的圖表就是使用svg格式顯示的。

附一個svg數據格式的介紹：

http://baike.baidu.com/link?url=QLNwuVWHvxtBw075wHb6IztcTa4k2TTLE96-ZJKIjVpYOHDyv-1Pxhzb-m1F8yu7KDALj_F0Gh3FYEUNLM3PJxX1n5QuTdOEnjemhpDG04_

3.然后打開nuget，添加SVG Rendering Library。

沒有nuget的可以到http://svg.codeplex.com/去下載dll。

4.添加了引用之后在代碼中創建一個公用方法，添加以下代碼。

這個是根據svg的xml數據生成一個圖片的方法，需要使用到上面第三步添加的東西。

　　　　　public static Bitmap CreateSvgBitmap(string SvgStr, int Width)
        {
            SvgDocument svgDoc;

            // Create a MemoryStream from SVG string.
            using (MemoryStream streamSvg = new MemoryStream(Encoding.UTF8.GetBytes(SvgStr)))
            {
                svgDoc = SvgDocument.Open<SvgDocument>(streamSvg);
            }

            // Scale SVG document to requested width.
            svgDoc.Transforms = new SvgTransformCollection();
            float scalar = (float) Width / (float)svgDoc.Width;
            svgDoc.Transforms.Add(new SvgScale(scalar, scalar));
            svgDoc.Width = new SvgUnit(svgDoc.Width.Type, svgDoc.Width * scalar);
            svgDoc.Height = new SvgUnit(svgDoc.Height.Type, svgDoc.Height * scalar);
            return svgDoc.Draw();
        }

5.然后寫控制器請求以及返回代碼數據，因為提交請求里有xml數據mvc會自動攔截，需要添加 ValidateInput(false)標記下。

返回的時候需要添加這段代碼，表示返回的是附件，否則頁面就直接跳轉了。

Response.Headers.Add("Content-Disposition", string.Format("attachment; filename={0}", filename));

我這里功能只需要導出圖片格式的，所以去掉了其他格式。

　　　　 [ValidateInput(false)]
        public FileContentResult ExportCharts(string filename, string type, string svg)
        {
            if (string.IsNullOrEmpty(svg))
                return null;

            int width = 1000;
            MemoryStream fileStream = new MemoryStream();
            Bitmap img = ChartsUtils.CreateSvgBitmap(svg,width);
            switch (type)
            {
                case "image/jpeg":
                    img.Save(fileStream, ImageFormat.Jpeg);
                    break;
                case "image/png":
                    img.Save(fileStream, ImageFormat.Png);
                    break;
                case "image/svg+xml":
                    StreamWriter writer = new StreamWriter(fileStream);
                    writer.Write(svg);
                    writer.Flush();
                    break;
                default:
                    throw new InvalidOperationException(string.Format("ContentType '{0}' is invalid.", type));
            }
            fileStream.Flush();
            Response.Headers.Add("Content-Disposition", string.Format("attachment; filename={0}", filename));
            return File(fileStream.ToArray(), type);
        }

 6.最后，功能完成。

 

 

附上git上的一個官方參考代碼地址。

https://github.com/imclem/Highcharts-export-module-asp.net