echarts 导出图片，并将图片导出pdf格式

1、官方下载echarts 包。

2、实例案例：

 1）页面：

<h2>Index</h2>

<div id="main" style="height:400px"></div>

<br />
<br />

<div id="main2" style="height:600px"></div>


<input type="button" name="name" value="导出" id="export" />

<form id="chartForm" style="display:none" method="post" enctype="multipart/form-data" action="/lang/EchartTest/Export">
    <input id="imageValue" name="base64Info" type="text" maxlength="50000" />
    <input id="imageValue" name="fileType" type="text" value=".png" />
</form>


<script src="~/Scripts/jquery-1.10.2.js"></script>


<script src="~/Resources/echarts-2.2.7/build/dist/echarts-all.js"></script>

<script src="~/Resources/main.js"></script>

<script src="~/Resources/main2.js"></script>

2)main.js

var myChart = echarts.init(document.getElementById('main'));

var option = {
    tooltip: {
        show: true
    },
    legend: {
        data: ['销量']
    },
    xAxis: [
        {
            type: 'category',
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            "name": "销量",
            "type": "bar",
            "data": [5, 20, 40, 10, 10, 20]
        }
    ]
};

// 为echarts对象加载数据 
myChart.setOption(option);

//导出
$('#export').on('click', function () {
    alert('111');
    var chartExportUrl = '/lang/EchartTest/Export';
    var picBase64Info = myChart.getDataURL();//获取echarts图的base64编码，为png格式。

    $('#chartForm').find('input[name="base64Info"]').val(picBase64Info);//将编码赋值给输入框                                               
    $('#chartForm').submit();
});

3)main2.js

var option = {
    title: {
        text: 'Spread用户访问来源\n',
        x: 'center',
        padding:[0,0,30,0]
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
        padding: [30, 0, 30, 0]
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 1548, name: '搜索引擎' }
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

var myChart = echarts.init(document.getElementById('main2'));


// 为echarts对象加载数据 
myChart.setOption(option);

4)Action

        [HttpPost]
        public ActionResult Export(string base64Info,string fileType)
        {
            string[] arr = base64Info.Split(new string[] { "base64," }, StringSplitOptions.RemoveEmptyEntries);
            byte[] byteArray = Convert.FromBase64String(arr[1]);

            string path = Server.MapPath("/Resoucrces/File/");
            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }

            string filename = DateTime.Now.ToFileTime() + fileType;
            string savePath = path + filename;

            FileStream fs = System.IO.File.Create(savePath);
            fs.Write(byteArray, 0, byteArray.Length);
            fs.Close();

            string pdfPath = path + DateTime.Now.ToFileTime() + ".pdf";

            ConvertHelper.ConvertJPGToPDF(savePath, pdfPath);

            return Content("保存成功");
        }

5）安装 iTextSharp 程序包

用nuget 安装 iTextSharp ：

Install-Package iTextSharp

6）ConvertHelper

    public static void ConvertJPGToPDF(string jpgfile, string pdf)
        {
            var document = new Document(iTextSharp.text.PageSize.A4, 25, 25, 25, 25);
            using (var stream = new FileStream(pdf, FileMode.Create, FileAccess.Write, FileShare.None))
            {
                PdfWriter.GetInstance(document, stream);
                document.Open();
                using (var imageStream = new FileStream(jpgfile, FileMode.Open, FileAccess.Read, FileShare.ReadWrite))
                {
                    var image = Image.GetInstance(imageStream);
                    if (image.Height > iTextSharp.text.PageSize.A4.Height - 25)
                    {
                        image.ScaleToFit(iTextSharp.text.PageSize.A4.Width - 25, iTextSharp.text.PageSize.A4.Height - 25);
                    }
                    else if (image.Width > iTextSharp.text.PageSize.A4.Width - 25)
                    {
                        image.ScaleToFit(iTextSharp.text.PageSize.A4.Width - 25, iTextSharp.text.PageSize.A4.Height - 25);
                    }
                    image.Alignment = iTextSharp.text.Image.ALIGN_MIDDLE;
                    document.Add(image);
                }
                document.Close();
            }
        }

7）效果：

图片效果：

 

pdf效果：