由于前台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用hmlt2canvas插件转换成canvas，再将canvas转换成图片，最后将图片写入pdf.
table的话就使用：jspdf.plugin.autotable.js

首先将要导入的部分html单独提取出来，写入到一个iframe里面，为了保持外观，还需要将这部分用的css也要写入，再将iframe里面的body标签下面的所有内容转换成canvas. 如果html里面有svg，则先将svg转换成canvas。

table需要单独导入， jspdf.plugin.autotable.js插件支持json数组，支持table标签的html元素。本文就是用table标签。

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

    });

};

js生成pdf报表的更多相关文章

  1. [.NET开发] C#使用doggleReport生成pdf报表的方法

    本文实例讲述了C#使用doggleReport生成pdf报表的方法.分享给大家供大家参考,具体如下: 1. 安装nuget -install package DoddleReport -install ...

  2. 使用JSP页面生成PDF报表

    转自:http://developer.51cto.com/art/200907/134261.htm 1.iText简介 iText是一个开放源码的Java类库,可以用来方便地生成PDF文件.大家通 ...

  3. 用js生成PDF的方案

    在java里,我们常用Itext来生成pdf,在pdf文件里组合图片,文字,画表格,画线等操作,还会遇到中文支持的问题. 那好,现在想直接在web前端就生成pdf怎么办,目前有以下几个解决方案 1:J ...

  4. Java生成PDF报表

    一.前言 前几天,做ASN条码收货模块,需要实现打印下载收货报表,经一番查找,选定iText--用于生成PDF文档的一个Java类库.废话不多说,进入正题. 二.iText简介 iText是著名的开放 ...

  5. JAVA 生成PDF报表(）

    许多应用程序都要求动态生成 PDF 文档.这些应用程序涵盖从生成客户对帐单并通过电子邮件交付的银行到购买特定的图书章节并以 PDF 格式接收这些图书章节的读者.这个列表不胜枚举.在本文中,我们将使用 ...

  6. js 生成 pdf 文件

    话不多说好吧, 直接上demo图: 直接上代码好吧:(要引入的两个js  链接我放最后) <!DOCTYPE html> <html> <head> <met ...

  7. 使用node.js生成excel报表下载(excel-export express篇)

    引言:日常工作中已经有许多应用功能块使用了nodejs作为web服务器,而生成报表下载也是我们在传统应用. java中提供了2套类库实现(jxl 和POI),.NET 作为微软的亲儿子更加不用说,各种 ...

  8. 在页面和请求中分别使用XML Publisher生成PDF报表且自动上传至附件服务器

    两个技术要点: 1.使用TemplateHelper.processTemplate方法生成目标PDF的InputStream流,再使用ftp中上传流的方法将其上传至附件服务器. 2.在请求中调用AM ...

  9. java 生成pdf报表

    public void saveMapAddressInfo(String orderCode){ try{ List<Leads> leadses = leadsService.find ...

随机推荐

  1. Codeforces Round #228 (Div. 1) A. Fox and Box Accumulation 贪心

    A. Fox and Box Accumulation 题目连接: http://codeforces.com/contest/388/problem/A Description Fox Ciel h ...

  2. C#高级编程9-第10章 集合

    集合 1.集合接口和类型 接口 说明 IEnumerable<T> 如果foreach语句用于集合,就需要IEnumerable接口.这个借口定义了方法GetEnumerator(),他返 ...

  3. offset大家族(一)

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. C++反汇编-继承和多重继承

    学无止尽,积土成山,积水成渊-<C++反汇编与逆向分析技术揭秘> 读书笔记 一.单类继承 在父类中声明为私有的成员,子类对象无法直接访问,但是在子类对象的内存结构中,父类私有的成员数据依然 ...

  5. oracle的dump理解

    http://blog.csdn.net/notbaron/article/details/51228444 http://blog.csdn.net/lqx0405/article/details/ ...

  6. [Asp.Net web api]基于自定义Filter的安全认证

    摘要 对第三方开放的接口,处于安全的考虑需要对其进行安全认证,是否是合法的请求.目前在项目中也遇到这种情况,提供的接口因为涉及到客户铭感数据,所以在调用的时候,不能直接暴露,需要有一个认证的机制.所以 ...

  7. C#程序集系列05,让程序集包含多个module

    本篇体验在一个程序集中包含多个module. □ 创建3个module →删除F盘as文件夹中的一些文件,只剩下如下3个文件→用记事本打开MyFirstModule.cs文件,修改如下,并保存 usi ...

  8. C#中List<T>是怎么存放元素的

    Jeffrey Zhao在"你的字典里有多少元素?"一文中,提到了他在面试时问过的一个问题:List<T>是怎么存放元素?不幸的是,自己也回答不出来,只知道怎么用,却不 ...

  9. [Shell学习笔记] 命令行下的高级网络工具cURL命令

    原文: http://www.1987.name/365.html Linux curl命令是一个利用URL规则在命令行下工作的文件传输工具.它支持文件的上传和下载,所以是综合传输工具,但按传统,习惯 ...

  10. iptables配置实践

    前言 在大企业中防火墙角色主要交给硬件来支持,效果自然没话说只是需要增加一点点成本,但对于大多数个人或者互联网公司来说选择系统自带的iptables或者第三方云防火墙似乎是更加合适的选择,通过一些合理 ...