使用jspdf生成pdf报表
由于前台html已经动态生成报表，而且，前台有一个功能，一个date range组件，当你拖动的时候，报表会在不提交到后台的情况下动态变化。
因此需要用到js生成生报表：
用到的组件：
jquery.js jspdf.js canvg.js html2canvas.js jspdf.plugin.autotable.js
前台动态生成的chart现在一般是用的html5的canvas或者是svg,很不幸运，我遇到的是svg, 如果是flash没研究过。
由于报表还需要保持原html页面的外观，但是又不是整个html，真正需要转换成pdf报表的是：html+svg
前提：jsPDF 支持html，但支持不是很好，当你用一个html直接生成pdf的时候，其实他只保留了html里面文本，样式，结构都丢失了。
比如：table就丢失了。
jsPDF不支持svg导入。
思路：将svg转换成canvas，再将html+canvas转换成canvas，再使用html2canvas将canvas转换成图片，最后将图片写入pdf.
table的话就使用：jspdf.plugin.autotable.js
firefox: html2canvas不能直接将svg+html转换成canvas --> 先将svg元素转换成canvas --> html+canvas转换成canvas
chrome: html2canvas可以直接将svg+html转换成canvas
//将指定节点下面的所有svg转换成canvas
//这里需要:canvg.js
function svg2canvas (targetElem) {
var nodesToRecover = [];
var nodesToRemove = [];
var svgElem = targetElem.find('svg');
svgElem.each(function(index, node) {
var parentNode = node.parentNode;
var svg = node.outerHTML;
var canvas = document.createElement('canvas');
canvg(canvas, svg);
nodesToRecover.push({
parent: parentNode,
child: node
});
parentNode.removeChild(node);
nodesToRemove.push({
parent: parentNode,
child: canvas
});
parentNode.appendChild(canvas);
});
}
//这里是将html(文本)在一个iframe里面打开
//主要是排除其它元素的干扰导致不成功，之前是一直输出不成功，所示才使用iframe
//这段代码是官网抠下来的。
//还有个问题就是：如果将页面的chart转换成canvas了，那web页面报表动态变化的功能将丢失。
function openWithIframe(html){
var iframe = document.createElement('iframe');
iframe.setAttribute("id", "myFrmame");
var $iframe = $(iframe);
$iframe.css({
'visibility': 'hidden', 'position':'static', 'z-index':'4'
}).width($(window).width()).height($(window).height());
$('body').append(iframe);
var ifDoc = iframe.contentWindow.document;
//这里做是将报表使用到的css重新写入到iframe中，根据自身的需要
var style = "<link href='/javax.faces.resource/css/auth.css.jsf' rel='stylesheet' type='text/css'>";
style+="<link href='/javax.faces.resource/css/common.css.jsf' rel='stylesheet' type='text/css'>";
style+="<link href='/javax.faces.resource/css/dc.css.jsf' rel='stylesheet' type='text/css'>";
html = "<!DOCTYPE html><html><head>"+style+"</head><body>"+html+"</body></html>"
ifDoc.open();
ifDoc.write(html);
ifDoc.close();
/*
//这里做一些微调，根据自身的需要
var fbody = $iframe.contents().find("body");
fbody.find("#chart-center").removeAttr("width");
fbody.find(".page-container").css("width", "370px");
fbody.find(".center-container").css("width", "600px");
fbody.find("#severity-chart svg").attr("width", "370");
fbody.find("#status-chart svg").attr("width", "300");
*/
return fbody;
}
//导出pdf
function exportAsPDF(){
//得到要导出pdf的html根节点
var chartCenter = document.getElementById("chart-center").outerHTML;
var fbody = openWithIframe(chartCenter);
svg2canvas(fbody);
//html2canvas官网的标准方法
html2canvas(fbody, {
onrendered: function(canvas) {
//var myImage = canvas.toDataURL("image/png");
//alert(myImage);
//window.open(myImage);
/*
canvas.toBlob(function(blob) {
saveAs(blob, "report.png");
}, "image/png");
*/
//将图片转换成：base64编码的jpg图片。
var imgData = canvas.toDataURL('image/jpeg');
//alert(imgData);
//l:横向， p：纵向
var doc = new jsPDF('l', 'pt', 'a3');
//var doc = new jsPDF('p', 'mm', [290, 210]);
//var doc = new jsPDF();//默认是A4，由于我的报表比较大，所以专门设置了尺寸。
doc.setFontSize(22);
doc.setFontType("bolditalic");
doc.text(500, 30, "Ticket Report"); //x:500, y:30
doc.addImage(imgData, 'jpeg', 10, 60); //写入位置：x:10, y:60
doc.addPage(); //新建一页
//这里就是把将table写入到pdf里面。
var res = doc.autoTableHtmlToJson(document.getElementById("tickets-summary-table"), true);
doc.autoTable(res.columns, res.data);
doc.save('ticket.report_'+new Date().getTime()+'.pdf');
$('#myFrmame').remove(); //最后将iframe删除
},
background:"#fff", //这里给生成的图片默认背景，不然的话，如果你的html根节点没有设置背景的话，会用黑色填充。
allowTaint: true //避免一些不识别的图片干扰，默认为false，遇到不识别的图片干扰则会停止处理html2canvas
});
};
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关推荐
-
javascript操作excel生成报表示例
复制代码 代码如下: <html> <head><script language="javascript" type="text/javascript">function MakeExcel(){var i,j; try { var xls = new ActiveXObject ( "Excel.Application" ); } catch(e) { al
-
利用iText在JSP中生成PDF报表
问题的由来 前不久做了一个通过JSP生成PDF报表的小项目,算得上开了一次眼界.企业的一些信息通过网络形成Html报表,虽然IE可以直接打印显示在其中的内容,但是从界面上来看,如果直接将Html的显示结果打印出来,显得不太美观.如果将它转成PDF文件再打印,则打印效果会好很多. iText简介 iText是一个开放源码的Java类库,可以用来方便地生成PDF文件.大家通过访问http://sourceforge.net/project/showfiles.php?group_id=15255&r
-
SSH框架网上商城项目第29战之使用JsChart技术显示商品销售报表
这个项目终于接近尾声了,注册功能我就不做了,关于注册功能我的另一篇文章详细的介绍了一下注册的表单验证,可以直接把功能加到本项目中,修改一下相关的跳转即可,就不再做了.另外,目前这个项目只有action层和service层,dao层我还没抽取,做完这个报表,我把dao层抽取一下,再对整个项目做个总结,差不多就可以上传源码了,到时候欢迎大家下载~ 这一节主要做一下最后一个功能:使用JsChart这个工具来显示商品的销售报表,JsChart是很好用的一款制作报表的工具,之所以好用,是因为它的官方实例做
-
JSP 报表打印的一种简单解决方案
1. 在Word或Excel中制作报表的样式. Excel的行高和列宽单位无法用mm或cm表示. 需要计算.在1024*768下,1CM约为38像素. 以此为基准,可计算并控制报表的行列位置. 2. 在Word中设置"表格--标题行重复". 在Excel中设置"文件--页面设置--工作表--打印标题". 3. 另存为网页,改后缀名"htm"为"jsp". 4. Word报表文件头为: <%@page contentTyp
-
javascript实现动态显示颜色块的报表效果
利用html的颜色块动态展示数据 <style type="text/css"> *{ padding: 0; margin: 0; } .tubiao,.jihua,.shiji,.riqi{ width: 100%; overflow: hidden; margin-top: 10px; } .left{ width: 10%; float: left; text-align: center; height: 25px; line-height: 25px; } .ri
-
javascript操作excel生成报表全攻略
最近做一个项目,用到了javascript操纵excel以生成报表,下面是标有详细注解的实例 复制代码 代码如下: <html> <head> <script language="javascript" type="text/javascript"> </script><script language="javascript" type="text/javascript"&
-
JavaScript 报表展示实现代码
VRML Report v\:*{behavior:url(#default#vml)}/*声明v为vml变量*/ 20% 25% 40% 50% 75% 80% 原始大小 125% 150% 200% 300% 400% [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
JSChart轻量级图形报表工具(内置函数中文参考)
因为网上讲这个框架的文章不是很多,而且它本身对中文支持不是很好,手册什么的都是英文的,虽然不是很多,但考虑到一些新手可能没有时间和精力来阅读参考手册,为了让更多的朋友了解它,所以工作之余就大概的翻译了一下它的内置函数,因为时间仓促,有些地方翻译的很大概,也难免混杂了一些错误,算是抛砖引玉吧,希望大家不明白的地方亲手测试一下,参照它的官方提供的例子很容易上手. JSChart内置函数参考 colorizeBars(array colordata)设置柱状图各矩形颜色. colorizePie(ar
-
jsp利用echarts实现报表统计的实例
echarts用来做数据报表的一个展示效果了,这里我们来给各位介绍一个java/jsp利用echarts实现报表统计的例子,例子非常的简单只是把数据调出来给echarts即可了. 开始上代码. 首先是tag,这个东西,大学之后,几乎不怎么用了,没想到现在又用到了. <%@ tag pageEncoding="UTF-8" isELIgnored="false" body-content="empty"%> <%--自定义div容
-
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化. 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js html2canvas.js jspdf.plugin.autotable.js 前台动态生成的chart现在一般是用的html5的canvas或者是svg,很不幸运,我遇到的是svg, 如果是flash没研究过. 由于报表还需要保持原html页面的外观,但
-
C#使用doggleReport生成pdf报表的方法
本文实例讲述了C#使用doggleReport生成pdf报表的方法.分享给大家供大家参考,具体如下: 1. 安装nuget -install package DoddleReport -install package DoddleReport.iTextSharp 2. 实例代码 static void Main(string[] args) { var query = GetAll(); var report = new Report(query.ToReportSource()); repo
-
jsPDF生成pdf后在网页展示实例
复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>jsPDF</title> <script type="text/javascript" src="jspdf.js"></script> <s
-
JAVA生成pdf文件的实操指南
目录 一.简介 二.实操 三.原理解析 1.是什么? 1.1.关键技术 2.怎么做?为什么? 3.参考 总结 一.简介 PDF文件格式可以将文字.字型.格式.颜色及独立于设备和分辨率的图形图像等封装在一个文件中.本文实现将html页面转PDF. 二.实操 生成pdf文件成功,但是文字对不上.当修改”GetHtmlContent“部分的编码之后,再次执行生成PDF文件即可完成正确的实现. Edit Configurations 三.原理解析 从这几点深入剖析和总结这个小项目: 1.是什么? 该项目
-
phonegap教程使用jspdf库在应用中生成pdf文件(pdf生成方法)
首先在命令行创建一个PhoneGap工程 复制代码 代码如下: phonegap create . "jspdf.sample" "JSPDF App"phonegap local plugin add org.apache.cordova.filephonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git 然后,下载JSPDF代码 down
-
基于Phantomjs生成PDF的实现方法
本文实例讲述了基于Phantomjs生成PDF的实现方法.分享给大家供大家参考,具体如下: 最近在node.js项目开发中,遇见生成PDF的需求,当然生成PDF不是一个新意的需求:我可以选择利用开源的pdfkit或者其他node pdf模块,或者通过edge.js调用.net/python下的pdf库去做生成pdf.但是在我看来对于这些东西不管如何也需要花费我们太多的时间(pdf报表的内容报表很复杂),不如把所有的画图实现逻辑推向大家所熟悉的html+css来的简洁,快速,这样对于pdf格式变化
-
iReport生成pdf打印的实例代码
先下载ireport版本 ,我下载的是 iReport-5.0.4 编辑模板 employees_identity_print_templet @RequestMapping("printEmpPdf") @ResponseBody public Result printEmpPdf(HttpServletRequest request,HttpServletResponse response, Parameter parameter){ Result result=Result.
-
Vue前端如何实现生成PDF并下载功能详解
目录 1. 安装及引入 2. 封装导出 pdf 文件方法 配置详解 封装导出 pdf 文件方法(utils/htmlToPdf.js) 相关组件中应用 效果 待优化部分 总结 思路: 通过 html2canvas 将 HTML 页面转换成图片,然后再通过 jspdf 将图片的 base64 生成为 pdf 文件. 1. 安装及引入 // 将页面 html 转换成图片 npm install html2canvas --save // 将图片生成 pdf npm install jspdf --s
-
python使用reportlab生成pdf实例
目录 Intro 功能点 预览 完整代码 使用场景1:生成文件 使用场景2:web(flask) 总结 Intro 项目中遇到需要 导出统计报表 等业务时,通常需要 pdf 格式.python 中比较有名的就是 reportlab .这边通过几个小 demo 快速演示常用 api.所有功能点 源码 都在 使用场景. 一句话了解:跟 css 差不多,就是不断地对每样东西设置 style,然后把 style 和内容绑定. 功能点 生成文件: 先 SimpleDocTemplate(‘xxx.pdf’