把页面上的图表导出为pdf文件,分享一种请求下载文件的方法
最近客户提出一个需求,就是把页面上的图表导出为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文件,分享一种请求下载文件的方法的更多相关文章
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- Highcharts图表导出为pdf的JavaWeb实践
写给读者的话^_^: 众所周知,基于Highcharts插件生成的svg图片组(注意这里鄙人指的组是若干图有序组合,并非一张图片,具有业务意义)导出为PDF文档是有难度滴.鄙人也曾“异想天开”用前端技 ...
- 使用JavaScript把页面上的表格导出为Excel文件
如果在页面上展示了一个数据表格,而用户想把这个表格导出为Excel文件,那么在要求不高的情况下,可以不通过服务器生成表格,而是直接利用JavaScript的Blob和Object URL特性将表格导出 ...
- 基于ITextSharp插件在ASP.NET MVC中将图表导出为PDF
样本: 在这个示例中,我们使用的是微软给我们提供的数据库,也就是家喻户晓的Northwind数据库.要下载Microsoft的免费样本Northwind数据库,您需要访问以下URL.下载Northwi ...
- JS 将页面上的表格导出为 Excel 文件
如果在页面上展示了一个表格,想把这个表格导出为Excel文件,那么在要求不高的情况下,可以直接利用 JavaScript 的 Blob 和 Object URL 特性将表格导出.不过,这就是利用了 E ...
- asp.net将页面内容按需导入Excel,并设置excel样式,下载文件(解决打开格式与扩展名指定的格式不统一的问题)
//请求一个excel类 Microsoft.Office.Interop.Excel.ApplicationClass excel = null; //创建 Workbook对象 Microsoft ...
- 【SpringMVC】【EasyUI】关于使用EasyUIForm上传文件,返回JsonIE提示下载文件的解决办法!
先说一下环境 EasyUI+SpringMVC+MyBatis 因为按正常手段,无法使用Ajax来提交一个包含文件的表单,故想到利用EasyUI的Form来提交,EasyUI的form封装了一套伪Aj ...
- .Net 上传文件到ftp服务器和下载文件
突然发现又很久没有写博客了,想起哎呦,还是写一篇博客记录一下吧,虽然自己还是那个渣渣猿. 最近在做上传文件的功能,上传到ftp文件服务器有利于管理上传文件. 前面的博客有写到layui如何上传文件,然 ...
- Html Ajax上传文件,form表单下载文件
Html中的代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quo ...
随机推荐
- Oracle 的递归查询将层级变成字符串
select A.PARENT_GROUP_ID, A.GROUP_ID,sys_connect_by_path(A.GROUP_ID,'/') || '/' path from dam_dataen ...
- SQL Server 索引(index) 和 视图(view) 的简单介绍和操作
--索引(index)和视图(view)-- --索引(index)----概述: 数据库中的索引类似于书籍的目录,他以指针形式包含了表中一列或几列组合的新顺序,实现表中数据库的逻辑排序.索引创建在数 ...
- win10无法使用内置管理员账户打开应用怎么办
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System \UIPI 右边有个默认的项.将它的值改成1
- VC++中StretchBlt图像失真问题的解决办法
在 VC 中使用 StretchBlt 会碰到一些与点阵图大小缩放相关的一些问题.在扩展一个点阵图时,StretchBlt必须复制图素行或列.如果放大倍数不是原图的整数倍,那么此操作会造成产生的图像有 ...
- 如何在HTML中加载Flash(2种实现方法)_HTML/Xhtml_网页制作
点评:如何在HTML中加载Flash,为网页添加更多的色彩,普通的网页以无法满足用户的需求,接下来为大家介绍下2种在HTML中加载Flash的方法,感兴趣的各位可以适当参考下,希望对你有所帮助 第一种 ...
- 史航第12次作业&总结
作业1:找出最长的字符串 #include <stdio.h> #include <string.h> int main() { ],strings[][]; ; printf ...
- [原创.数据可视化系列之三]使用Ol3加载大量点数据
不管是百度地图还是高德地图,都很难得见到在地图上加载大量点要素,比如同屏1000的,因为这样客户端性能会很低,尤其是IE系列的浏览器,简直是卡的要死.但有的时候,还真的需要,比如,我要加载全球的AQI ...
- Ubuntu如何更新源
Ubuntu的源其实就是更新各种软件包需要用到镜像网站, 当大家在虚拟机上安装Linux镜像的时候肯定会遇到各种Linux软件没有安装,当你用apt-get安装的时候它会提示无效的网址,这个时候你就需 ...
- 用CSS3在手机上写弹出框,遮盖层
html: 在页面头部要写 <title>网上预约</title> <link href="../App_Themes/default/css/header.c ...
- yii2 pjax使用
Pjax::begin(['id'=>'datalist']); echo GridView::widget([ 'dataProvider' => $dataProvider, 'col ...