由于前台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. poj 1330 Nearest Common Ancestors 单次LCA/DFS

    Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 19919   Accept ...

  2. 基于Landmark的人脸对齐以及裁剪方法

    利用Landmarks进行人脸对齐裁剪是人脸检测中重要的一个步骤.效果如下图所示: 基本思路为: a.人脸检测 人脸的检测不必多说了,基本Cascade的方式已经很不错了,或者用基于HOG/FHOG的 ...

  3. Git_期末总结

    终于到了期末总结的时刻了! 经过几天的学习,相信你对Git已经初步掌握.一开始,可能觉得Git上手比较困难,尤其是已经熟悉SVN的童鞋,没关系,多操练几次,就会越用越顺手. Git虽然极其强大,命令繁 ...

  4. MYSQL 慢日志

    http://blog.chinaunix.net/uid-9950859-id-122259.html

  5. LeetCode152：Maximum Product Subarray

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  6. 深入理解 Java中的 流 (Stream)

    首先,流是什么? 流是个抽象的概念.是对输入输出设备的抽象,Java程序中,对于数据的输入/输出操作都是以"流"的方式进行.设备能够是文件,网络,内存等. 流具有方向性,至于是输入 ...

  7. 基于遗传算法求解TSP问题（Java界面）

    近期为做展示,改写了一个遗传算法求TSP的Java界面版,思路代码和 http://blog.csdn.net/wangqiuyun/article/details/12838903 这篇文章思路是一 ...

  8. Selenium2+python自动化57-捕获异常（NoSuchElementException）

    前言 在定位元素的时候,经常会遇到各种异常,为什么会发生这些异常,遇到异常又该如何处理呢? 本篇通过学习selenium的exceptions模块,了解异常发生的原因. selenium+python ...

  9. Mongodb后台daemon方式启动

    Mongodb可以通过命令行方式和配置文件的方式来启动,具体命令如下: 命令行: [root@localhost mongodb]# ./bin/mongod --dbpath=/data/db 配置 ...

  10. 使用HTML5画饼图

    在进行数据的统计分析时, 饼图也是比较经常用到的一类统计图. 需求分析:   一个饼图一般包含以下几部分:   1.标题   2.扇形   3.份额(百分比)   4.标识器      设计:     ...