最近客户提出一个需求,就是把页面上的图表导出为pdf文件。

找了很多资料。终于有了点头绪。最主要是参考了HighCharts的做法。http://www.hcharts.cn/

实现原理:把页面图表的svg内容发送到后台,后台生成pdf图片文件流,返回。

但是遇到问题,用jquery的post请求,不能下载文件;用get请求方式,svg数据可能很多,传不过来;最后用了如下方法,创建一个隐藏的form来sumbit.

前台代码片段:

$("#btn").click(function () {
        var f = document.createElement("form");
        document.body.appendChild(f);
        var i = document.createElement("input");
        i.type = "hidden";
        f.appendChild(i);
        i.value = $("#r").html();
        i.name = "svg";

var j = document.createElement("input");
        j.type = "hidden";
        f.appendChild(j);
        j.value = "pdf";
        j.name = "tpye";
        f.method = "post";
        f.enctype="multipart/form-data"
        f.action = "/Chart/Export";
        f.submit();
    });

后台代码片段:后台会用到两个第三方的dll(itextsharp.dll和Svg.dll)

//HighCharts 导出图片 svg
        //filename type width scale svg
        [HttpPost]
        [ValidateInput(false)]
        public ActionResult Export(FormCollection fc)
        {
            try
            {
                string tType = fc["type"];
                tType = "application/pdf";
                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);
            }
            catch (Exception ex)
            {

return Content(ex.Message);
            }
            
        }

把页面上的图表导出为pdf文件,分享一种请求下载文件的方法的更多相关文章

  1. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  2. Highcharts图表导出为pdf的JavaWeb实践

    写给读者的话^_^: 众所周知,基于Highcharts插件生成的svg图片组(注意这里鄙人指的组是若干图有序组合,并非一张图片,具有业务意义)导出为PDF文档是有难度滴.鄙人也曾“异想天开”用前端技 ...

  3. 使用JavaScript把页面上的表格导出为Excel文件

    如果在页面上展示了一个数据表格,而用户想把这个表格导出为Excel文件,那么在要求不高的情况下,可以不通过服务器生成表格,而是直接利用JavaScript的Blob和Object URL特性将表格导出 ...

  4. 基于ITextSharp插件在ASP.NET MVC中将图表导出为PDF

    样本: 在这个示例中,我们使用的是微软给我们提供的数据库,也就是家喻户晓的Northwind数据库.要下载Microsoft的免费样本Northwind数据库,您需要访问以下URL.下载Northwi ...

  5. JS 将页面上的表格导出为 Excel 文件

    如果在页面上展示了一个表格,想把这个表格导出为Excel文件,那么在要求不高的情况下,可以直接利用 JavaScript 的 Blob 和 Object URL 特性将表格导出.不过,这就是利用了 E ...

  6. asp.net将页面内容按需导入Excel,并设置excel样式,下载文件(解决打开格式与扩展名指定的格式不统一的问题)

    //请求一个excel类 Microsoft.Office.Interop.Excel.ApplicationClass excel = null; //创建 Workbook对象 Microsoft ...

  7. 【SpringMVC】【EasyUI】关于使用EasyUIForm上传文件,返回JsonIE提示下载文件的解决办法!

    先说一下环境 EasyUI+SpringMVC+MyBatis 因为按正常手段,无法使用Ajax来提交一个包含文件的表单,故想到利用EasyUI的Form来提交,EasyUI的form封装了一套伪Aj ...

  8. .Net 上传文件到ftp服务器和下载文件

    突然发现又很久没有写博客了,想起哎呦,还是写一篇博客记录一下吧,虽然自己还是那个渣渣猿. 最近在做上传文件的功能,上传到ftp文件服务器有利于管理上传文件. 前面的博客有写到layui如何上传文件,然 ...

  9. Html Ajax上传文件,form表单下载文件

    Html中的代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quo ...

随机推荐

  1. React Native 实现页面动态切换

    第一步. 初始化子View constructor(props){ super(props); this.state = { isChange : true, itemView : (<Text ...

  2. 如何在一台电脑上开启多个tomcat

    大家基本上都只在一台电脑上面启动一个Tomcat,而启动多个Tomcat会提示报错等相关故障.而假如调试负载均衡及集群的时候,需要在一台电脑上面开启多个Tomcat,那么怎么开启呢? 首先需要知道的是 ...

  3. Windows下用Python 3.4+自带的venv模块创建虚拟环境

    Python 3.4+自带了venv模块,用于创建虚拟环境,每个虚拟环境都可以安装一套独立的第三方模块. 本文在Windows 10上操作. 1.创建一个虚拟环境: D:\>mkdir test ...

  4. 转:永久解决火狐浏览器出现的flash版本更新问题

    发现问题: 1.找到火狐浏览器,并打开出现问题的页面. 2.点击火狐浏览器的"打开菜单"按钮,选择"附加组件"按钮. 3.在"搜索所有添加附件&quo ...

  5. block的初识

    block的介绍: Block是iOS4.0之后新增的一种语法结构,也称为“闭包(closure)”.  SDK4.0新增的API大量使用了Block.  Block是一个匿名的函数代码块,此代码 ...

  6. Debug模式下编译溢出问题

    问题: 代码在Debug模式下编译报出内存溢出的错误,而Release模式下则没有. 由于Debug模式下包含调试信息,并且不作任何优化.而Release模式进行了各种优化,内存检测等操作均省去,使得 ...

  7. MdZ计算重调和特征值

    >> [eigvH,eigv] = MdZ2grid3d(/,) eigvH = 6.8775e+003 eigv = 5.0224e+003 >> [eigvH,eigv] ...

  8. CentOS6.5中配置Rabbitmq3.6.6集群方案

    一.安装Erlang环境 1.下载erlang源代码 wget http://erlang.org/download/otp_src_19.1.tar.gz 2.安装依赖相关库文件 yum insta ...

  9. object to 字符串json

    package com.beijxing.TestMain; import com.beijxing.entity.Student; import com.google.gson.Gson; impo ...

  10. sql server 数据遍历插入表变量

    )) DECLARE @str VARCHAR(MAX) ,) ,@start INT ,@end INT ,) SET @str = '1,2,3,4,5,6,7,8' SET @split = ' ...