使用jspdf生成pdf报表


Posted in Javascript onJuly 03, 2015

由于前台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 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
JSON相关知识汇总
Jul 03 #Javascript
javascript表格的渲染组件
Jul 03 #Javascript
解决jquery实现的radio重新选中的问题
Jul 03 #Javascript
移动端JQ插件hammer使用详解
Jul 03 #Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 #Javascript
Javascript实现字数统计
Jul 03 #Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 #Javascript
You might like
利用php_imagick实现复古效果的方法
2016/10/18 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
解决python "No module named pip" 的问题
2018/10/13 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
师范应届生语文教师求职信
2013/10/29 职场文书
一句话工作感言
2014/03/01 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
第二次离婚起诉书
2015/05/18 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
Python标准库pathlib操作目录和文件
2021/11/20 Python
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
进行数据处理的6个 Python 代码块分享
2022/04/06 Python
基于Python实现对比Exce的工具
2022/04/07 Python
python使用shell脚本创建kafka连接器
2022/04/29 Python