• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

Highcharts本地导出图片和PDFasp.netmvc版

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

啰嗦： 现在大家利用Highcharts开发时，有时候会遇到导出的功能问题，但是highcharts默认是链接自己的服务器上进行处理，但是有时候我们会连不上他的服务器，所以我们要让他在我们的服务器上进行处理

平台: asp.net mvc4 

开发工具： visual studio 2013 

第三方插件：highcharts包、itextsharp.dll、Svg.dll 

 

mvc的基础不说。博客园上的mvc入门太多了

1、建立MVC4  选择基本模板（有jquery）

2、引用Highcharts库（下载的包里只需要js这个文件夹）

3、引用itextsharp.dll、Svg.dll 

4、建立HomeController 和 Action

图下：

 

因为引用_Layout.cshtml做为母视图  _Layout 定义了 scripts section  直接在Index.cshtml引用highcharts 必要的两个JS文件 Highcharts/highchart.js 和Highcharts/modules/exporting.js

Highcharts/modules/exporting.js是关于导出的js  待会修改

在Index.cshtml加入highcharts现成的例子

Index.cshtml内容：

<div id="container" style="min-width: 310px; min-height: 400px; margin: 0 auto"></div>
@section scripts
{
    <script type="text/javascript" src="@Url.Content("~/Highcharts/highcharts.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Highcharts/modules/exporting.js")"></script>
    <script type="text/javascript">
        $(function () {
            $('#container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: true
                },
                title: {
                    text: '运维系统统计图表'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.y}</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            format: '<b>{point.name}</b>: {point.y}'
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    type: 'pie',
                    name: '总数',
                    data: [{ name: 'Firefox', y: 45 },
                        { name: 'IE', y: 26 },
                        { name: 'Chrome', y: 12 },
                        { name: 'Safari', y: 8 },
                        { name: 'Opera', y: 6 },
                        { name: 'Others', y: 0 }]
                }]
            });
        });
    </script>
}

效果：

5、在HomeController里编写Export  Action

MemoryStream 在 System.IO命名空间下

SvgDocument 需要引用Svg.dll里

ImageFormat 需要引用System.Drawing;

PdfWriter和Document 需要引用itextsharp.dll

HomeController.cs内容如下：

using iTextSharp.text;
using iTextSharp.text.pdf;
using Svg;
using System;
using System.Collections.Generic;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Mvc;

namespace HighchartsExportMVC.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }


        //HighCharts 导出图片 svg
        //filename type width scale svg
        [HttpPost]
        [ValidateInput(false)]
        public ActionResult Export(FormCollection fc)
        {
            string tType = fc["type"];
            string tSvg = fc["svg"];
            string tFileName = fc["filename"];
            if (string.IsNullOrEmpty(tFileName))
                tFileName = "chart";
            MemoryStream tData = new MemoryStream(Encoding.UTF8.GetBytes(tSvg));
            MemoryStream tStream = new MemoryStream();
            string tTmp = new Random().Next().ToString();
            string tExt = "";
            string tTypeString = "";

            switch (tType)
            {
                case "image/png":
                    tTypeString = "-m image/png";
                    tExt = "png";
                    break;
                case "image/jpeg":
                    tTypeString = "-m image/jpeg";
                    tExt = "jpg";
                    break;
                case "application/pdf":
                    tTypeString = "-m application/pdf";
                    tExt = "pdf";
                    break;
                case "image/svg+xml":
                    tTypeString = "-m image/svg+xml";
                    tExt = "svg";
                    break;
            }

            if (tTypeString != "")
            {
                string tWidth = fc["width"];
                Svg.SvgDocument tSvgObj = SvgDocument.Open(tData);

                switch (tExt)
                {
                    case "jpg":
                        tSvgObj.Draw().Save(tStream, ImageFormat.Jpeg);
                        break;
                    case "png":
                        tSvgObj.Draw().Save(tStream, ImageFormat.Png);
                        break;
                    case "pdf":
                        PdfWriter tWriter = null;
                        Document tDocumentPdf = null;
                        try
                        {
                            tSvgObj.Draw().Save(tStream, ImageFormat.Png);
                            tDocumentPdf = new Document(new iTextSharp.text.Rectangle((float)tSvgObj.Width, (float)tSvgObj.Height));
                            tDocumentPdf.SetMargins(0.0f, 0.0f, 0.0f, 0.0f);
                            iTextSharp.text.Image tGraph = iTextSharp.text.Image.GetInstance(tStream.ToArray());
                            tGraph.ScaleToFit((float)tSvgObj.Width, (float)tSvgObj.Height);

                            tStream = new MemoryStream();
                            tWriter = PdfWriter.GetInstance(tDocumentPdf, tStream);
                            tDocumentPdf.Open();
                            tDocumentPdf.NewPage();
                            tDocumentPdf.Add(tGraph);
                            tDocumentPdf.Close();
                        }
                        catch (Exception ex)
                        {
                            throw ex;
                        }
                        finally
                        {
                            tDocumentPdf.Close();
                            tWriter.Close();
                            tData.Dispose();
                            tData.Close();

                        }
                        break;
                    case "svg":
                        tStream = tData;
                        break;
                }
            }
            return File(tStream.ToArray(), tType, tFileName);
        }

    }
}

 

OK 服务端处理已经完成，现在就要修改Highcharts/modules/exporting.js文件

 

稍微格式化一下代码

/*
 Highcharts JS v3.0.7 (2013-10-24)
 Exporting module

 (c) 2010-2013 Torstein Hønsi

 License: www.highcharts.com/license
*/
(function (f) {
    var A = f.Chart,
        t = f.addEvent,
        C = f.removeEvent,
        k = f.createElement,
        n = f.discardElement,
        u = f.css,
        o = f.merge,
        r = f.each,
        p = f.extend,
        D = Math.max,
        j = document,
        B = window,
        E = f.isTouchDevice,
        F = f.Renderer.prototype.symbols,
        x = f.getOptions(), y;
    p(x.lang, {
        printChart: "打印该页",
        downloadPNG: "下载PNG图片",
        downloadJPEG: "下载JPEG图片",
        downloadPDF: "下载PDF图片",
        downloadSVG: "下载SVG图片",
        contextButtonTitle: "功能菜单"
    });
    x.navigation = {
        menuStyle: {
            border: "1px solid #A0A0A0",
            background: "#FFFFFF",
            padding: "5px 0"
        }, menuItemStyle: {
            padding: "0 10px",
            background: "none",
            color: "#303030",
            fontSize: E ? "14px" : "11px"
        }, menuItemHoverStyle: {
            background: "#4572A5",
            color: "#FFFFFF"
        }, buttonOptions: {
            symbolFill: "#E0E0E0",
            symbolSize: 14,
            symbolStroke: "#666",
            symbolStrokeWidth: 3,
            symbolX: 12.5,
            symbolY: 10.5,
            align: "right",
            buttonSpacing: 3,
            height: 22,
            theme: {
                fill: "white",
                stroke: "none"
            },
            verticalAlign: "top",
            width: 24
        }
    };

    x.exporting = {
        type: "image/png",
        url: "/OAMA/Count/Export",
        buttons: {
            contextButton: {
                menuClassName: "highcharts-contextmenu",
                symbol: "menu",
                _titleKey: "contextButtonTitle",
                menuItems: [{
                    textKey: "printChart",
                    onclick: function () { this.print() }
                },
                { separator: !0 },
                {
                    textKey: "downloadPNG",
                    onclick: function () { this.exportChart() }
                }, {
                    textKey: "downloadJPEG",
                    onclick: function () { this.exportChart({ type: "image/jpeg" }) }
                }, {
                    textKey: "downloadPDF",
                    onclick: function () { this.exportChart({ type: "application/pdf" }) }
                }, {
                    textKey: "downloadSVG",
                    onclick: function () { this.exportChart({ type: "image/svg+xml" }) }
                }]
            }
        }
    };

    f.post = function (c, a) {
        var d, b; b = k("form", {
            method: "post",
            action: c,
            enctype: "multipart/form-data"
        }, {
            display: "none"
        }, j.body);
        for (d in a) k("input", {
            type: "hidden",
            name: d,
            value: a[d]
        }, null, b);
        b.submit(); n(b)
    }; p(A.prototype, {
        getSVG: function (c) {
            var a = this, d, b, z, h, g = o(a.options, c);
            if (!j.createElementNS)
                j.createElementNS = function (a, b) {
                    return j.createElement(b)
                };
            c = k("div", null, {
                position: "absolute",
                top: "-9999em",
                width: a.chartWidth + "px",
                height: a.chartHeight + "px"
            }, j.body);
            b = a.renderTo.style.width;
            h = a.renderTo.style.height;
            b = g.exporting.sourceWidth ||
                g.chart.width || /px$/.test(b) &&
                parseInt(b, 10) || 600;
            h = g.exporting.sourceHeight ||
                g.chart.height || /px$/.test(h) && parseInt(h, 10) || 400; p(g.chart, { animation: !1, renderTo: c, forExport: !0, width: b, height: h }); g.exporting.enabled = !1; g.series = []; r(a.series, function (a) { z = o(a.options, { animation: !1, showCheckbox: !1, visible: a.visible }); z.isInternal || g.series.push(z) }); d = new f.Chart(g, a.callback); r(["xAxis", "yAxis"], function (b) {
                    r(a[b], function (a, c) {
                        var g = d[b][c], f = a.getExtremes(),
                            h = f.userMin, f = f.userMax;
                        g && (h !== void 0 || f !== void 0) && g.setExtremes(h,
                        f, !0, !1)
                    })
                });
            b = d.container.innerHTML;
            g = null; d.destroy();
            n(c);
            b = b.replace(/zIndex="[^"]+"/g, "")
                .replace(/isShadow="[^"]+"/g, "")
                .replace(/symbolName="[^"]+"/g, "")
                .replace(/jQuery[0-9]+="[^"]+"/g, "")
                .replace(/url\([^#]+#/g, "url(#")
                .replace(/<svg /, '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ')
                .replace(/ href=/g, " xlink:href=")
                .replace(/\n/, " ")
                .replace(/<\/svg>.*?$/, "</svg>")
                .replace(/&nbsp;/g, " ")
                .replace(/&shy;/g, "­")
                .replace(/<IMG /g, "<image ")
                .replace(/height=([^" ]+)/g, 'height="$1"')
                .replace(/width=([^" ]+)/g, 'width="$1"')
                .replace(/hc-svg-href="([^"]+)">/g, 'xlink:href="$1"/>')
                .replace(/id=([^" >]+)/g, '>)
                .replace(/class=([^" >]+)/g, 'class="$1"')
                .replace(/ transform /g, " ")
                .replace(/:(path|rect)/g, "$1")
                .replace(/style="([^"]+)"/g, function (a) {
                    return a.toLowerCase()
                });
            return b = b.replace(/(url\(#highcharts-[0-9]+)&quot;/g, "$1").replace(/&quot;/g, "'")
        }, exportChart: function (c, a) {
            var c = c || {}, d = this.options.exporting, d = this.getSVG(o({ chart: { borderRadius: 0 } }, d.chartOptions, a, {
                exporting: {
                    sourceWidth: c.sourceWidth ||
                    d.sourceWidth, sourceHeight: c.sourceHeight || d.sourceHeight
                }
            })),
            c = o(this.options.exporting, c);
            f.post(c.url, {
                filename: c.filename || "chart",
                type: c.type,
                width: c.width || 0,
                scale: c.scale || 2,
                svg: d
            })
        }, print: function () {
            var c = this, a = c.container,
                d = [], b = a.parentNode,
                f = j.body, h = f.childNodes;
            if (!c.isPrinting)
                c.isPrinting = !0,
                    r(h, function (a, b) {
                        if (a.nodeType === 1)
                            d[b] = a.style.display,
                                a.style.display = "none"
                    }),
                    f.appendChild(a),
                    B.focus(),
                    B.print(),
                    setTimeout(function () {
                        b.appendChild(a); r(h, function (a, b) {
                            if (a.nodeType ===
                            1) a.style.display = d[b]
                        }); c.isPrinting = !1
                    }, 1E3)
        }, contextMenu: function (c, a, d, b, f, h, g) {
            var e = this,
                j = e.options.navigation,
                q = j.menuItemStyle,
                l = e.chartWidth,
                m = e.chartHeight,
                o = "cache-" + c,
                i = e[o], s = D(f, h), v, w, n; if (!i) e[o] = i = k("div", { className: c }, { position: "absolute", zIndex: 1E3, padding: s + "px" }, e.container), v = k("div", null, p({ MozBoxShadow: "3px 3px 10px #888", WebkitBoxShadow: "3px 3px 10px #888", boxShadow: "3px 3px 10px #888" }, j.menuStyle), i), w = function () { u(i, { display: "none" }); g && g.setState(0); e.openMenu = !1 }, t(i,
            "mouseleave", function () { n = setTimeout(w, 500) }), t(i, "mouseenter", function () { clearTimeout(n) }), t(document, "mouseup", function (a) { e.pointer.inClass(a.target, c) || w() }), r(a, function (a) { if (a) { var b = a.separator ? k("hr", null, null, v) : k("div", { onmouseover: function () { u(this, j.menuItemHoverStyle) }, onmouseout: function () { u(this, q) }, onclick: function () { w(); a.onclick.apply(e, arguments) }, innerHTML: a.text || e.options.lang[a.textKey] }, p({ cursor: "pointer" }, q), v); e.exportDivElements.push(b) } }), e.exportDivElements.push(v, i),
            e.exportMenuWidth = i.offsetWidth, e.exportMenuHeight = i.offsetHeight; a = { display: "block" }; d + e.exportMenuWidth > l ? a.right = l - d - f - s + "px" : a.left = d - s + "px"; b + h + e.exportMenuHeight > m && g.alignOptions.verticalAlign !== "top" ? a.bottom = m - b - s + "px" : a.top = b + h - s + "px"; u(i, a); e.openMenu = !0
        }, addButton: function (c) {
            var a = this, d = a.renderer, b = o(a.options.navigation.buttonOptions, c), j = b.onclick, h = b.menuItems, g, e, k = { stroke: b.symbolStroke, fill: b.symbolFill }, q = b.symbolSize || 12; if (!a.btnCount) a.btnCount = 0; if (!a.exportDivElements) a.exportDivElements =
            [], a.exportSVGElements = []; if (b.enabled !== !1) {
                var l = b.theme, m = l.states, n = m && m.hover, m = m && m.select, i; delete l.states; j ? i = function () { j.apply(a, arguments) } : h && (i = function () { a.contextMenu(e.menuClassName, h, e.translateX, e.translateY, e.width, e.height, e); e.setState(2) }); b.text && b.symbol ? l.paddingLeft = f.pick(l.paddingLeft, 25) : b.text || p(l, { width: b.width, height: b.height, padding: 0 }); e = d.button(b.text, 0, 0, i, l, n, m).attr({ title: a.options.lang[b._titleKey], "stroke-linecap": "round" }); e.menuClassName = c.menuClassName ||
                "highcharts-menu-" + a.btnCount++; b.symbol && (g = d.symbol(b.symbol, b.symbolX - q / 2, b.symbolY - q / 2, q, q).attr(p(k, { "stroke-width": b.symbolStrokeWidth || 1, zIndex: 1 })).add(e)); e.add().align(p(b, { width: e.width, x: f.pick(b.x, y) }), !0, "spacingBox"); y += (e.width + b.buttonSpacing) * (b.align === "right" ? -1 : 1); a.exportSVGElements.push(e, g)
            }
        }, destroyExport: function (c) {
            var c = c.target, a, d; for (a = 0; a < c.exportSVGElements.length; a++) if (d = c.exportSVGElements[a]) d.onclick = d.ontouchstart = null, c.exportSVGElements[a] = d.destroy(); for (a =
            0; a < c.exportDivElements.length; a++) d = c.exportDivElements[a], C(d, "mouseleave"), c.exportDivElements[a] = d.onmouseout = d.onmouseover = d.ontouchstart = d.onclick = null, n(d)
        }
    }); F.menu = function (c, a, d, b) { return ["M", c, a + 2.5, "L", c + d, a + 2.5, "M", c, a + b / 2 + 0.5, "L", c + d, a + b / 2 + 0.5, "M", c, a + b - 1.5, "L", c + d, a + b - 1.5] }; A.prototype.callbacks.push(function (c) { var a, d = c.options.exporting, b = d.buttons; y = 0; if (d.enabled !== !1) { for (a in b) c.addButton(b[a]); t(c, "destroy", c.destroyExport) } })
})(Highcharts);

 

将x.exporting = {

           url:"/OAMA/Count/Export"

 

上面代码是我在之前的项目写好的，highcharts 默认是url:"http://export.highcharts.com/"

将url改为

url:"/Home/Export"

 

其实exporting.src.js 里的内容是源文件的 可以直接引用这个文件，在这个js文件里改动

      

保存-编译-运行

成功导出~

 

 

源码下载

 

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
使用Jenkins部署asp.netcore发布时间：2022-07-10
下一篇：
asp.netcore视图组件（ViewComponent）简单使用发布时间：2022-07-10
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap