由于前台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. Loj10167 HDU2089 不要62

    题目描述 杭州人称那些傻乎乎粘嗒嗒的人为 626262(音:laoer). 杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来,就可以消除个别的士 ...

  2. UVALive 6886 Golf Bot FFT

    Golf Bot 题目连接: http://acm.hust.edu.cn/vjudge/problem/visitOriginUrl.action?id=129724 Description Do ...

  3. Linux下Qt安装

    1.下载qt-everywhere-opensource-src4.7.2.tar.gz(http://download.qt.io/archive/qt/4.7),并解压在/opt目录下,文件名为q ...

  4. JQUERY AJAX无刷新异步上传文件

    AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

  5. NHibernate的调试技巧和Log4Net配置

    1.查看nhibernate写在控制台里的sql语句 在配置文件中有这么个选项,假如把它设置为true,nhibernate会把执行的sql显示在控制台上. <property name=&qu ...

  6. arcgis python 创建 SQLite 数据库

    # -*- ################# """ Tool name: Create SQLite Database Source: CreateSQLiteDat ...

  7. EF Code First 学习笔记：表映射 多个Entity到一张表和一个Entity到多张表

      多个实体映射到一张表 Code First允许将多个实体映射到同一张表上,实体必须遵循如下规则: 实体必须是一对一关系 实体必须共享一个公共键 观察下面两个实体: public class Per ...

  8. unity 质量设置 Quality Settings

    Unity allows you to set the level of graphical quality it will attempt to render. Generally speaking ...

  9. DWZ SSH2 菜单树--使用Struts2 标签（iterator/set/if 组合使用）

    最近在研究DWZ框架,然后要写一个菜单树,后台我使用了SSH2,然后想把菜单通过后台传过来的对象展示出来. 但是,发现应用样式的时候,如果子菜单在子循环中为空的话,会多出一对空标签“<ul> ...

  10. 第一章 关于html适应手机屏幕的写法

    在网页的中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度: <meta name="viewport" content="width=device-widt ...