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效果: