摘要：最近工作使用了HighCharts，要用到保存成圖片功能，但是是內(nèi)部使用，不允許連接外網(wǎng)，于是就學習了下highcharts生成本地圖片。highcharts有一個exporting.js來負責導出成圖片功能。1.先在頁面引用兩個js。我使用的是exporting.src.js，方便查看源碼，這里需要修改一點點東西。要顯示中文的話，需要在exporting.src.js最末尾處加上以下設置，或者直

最近工作使用了HighCharts，要用到保存成圖片功能，但是是內(nèi)部使用，不允許連接外網(wǎng)，于是就學習了下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，這里發(fā)送了一個請求到highcharts官網(wǎng)，然后處理成圖片之后再返回回來，并不是使用js生成的圖片。

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

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

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

附一個svg數(shù)據(jù)格式的介紹：

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

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

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

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

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

　　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.然后寫控制器請求以及返回代碼數(shù)據(jù)，因為提交請求里有xml數(shù)據(jù)mvc會自動攔截，需要添加 ValidateInput(false)標記下。

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

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.最后，功能完成。