45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:jspdf如何生成pdf报表?

jspdf如何生成pdf报表?

2015-07-23 17:28:50 来源:www.45fan.com 【

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
 });
 
};

以上所述就是本文的全部内容了,希望大家能够喜欢。


本文地址:http://www.45fan.com/bcdm/15460.html
Tags: PDF 生成 jspdf
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部