由于前台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 #356 (Div. 2) D. Bear and Tower of Cubes dfs

    D. Bear and Tower of Cubes 题目连接: http://www.codeforces.com/contest/680/problem/D Description Limak i ...

  2. 利用Hog特征和SVM分类器进行行人检测

    在2005年CVPR上,来自法国的研究人员Navneet Dalal 和Bill Triggs提出利用Hog进行特征提取,利用线性SVM作为分类器,从而实现行人检测.而这两位也通过大量的测试发现,Ho ...

  3. Perforce-Server迁移

    Author: JinDate: 20140827System: Windows 2008 R2 从Windows 2008 R2迁移到Windows 2008 R2 linux版本迁移官方文档htt ...

  4. 最好的PHP博客系统

    1.Wordpress http://www.wordpress.org/ B2基础上开发而来,这是国内用户比较喜欢而且用户较多的一个php博客程序,缘由是因为Wordpress提供大量插件和模板,让 ...

  5. 使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版

    通常把一些重要信息.需要重点标注的信息放在轮播的下方显示,这部分区域用到了大字体的标题.副标题以及段落文字等. <div class="row" id="bigCa ...

  6. 编码策略：在ios编码中一定要少写全局变量。

    ios中全局变量默认是灰绿色的,只有少些全局变量,才能提高代码的聚合程度.才能更容易管理代码.

  7. Android 手动按power键上锁，没有锁屏提示音，无法恢复【单机必现】

    測试步骤 [測试版本号]T0606 [模块版本号] NAVI锁屏:5.0.0.ck [測试步骤] 1.手动按power键上锁, [測试结果] 没有锁屏提示音,无法恢复[单机必现] [预期结果] 有提示 ...

  8. 使用 NSPropertyListSerialization 持久化字典与数组

    NSPropertyListSerialization The NSPropertyListSerialization class provides methods that convert prop ...

  9. jQuery元素属性attr设置多个键值或函数 删除属性removeAttr

    $("Element").attr(name) '取得第一个匹配的属性值,比如$("img").attr("src") $("El ...

  10. Oracle通用分页存储过程的创建与使用

    Oracle通用分页存储过程的创建与使用 1.创建Oracle包的定义.使用 REF CURSOR 数据类型来处理 Oracle 结果集.REF CURSOR 是一个指向 PL/SQL 查询所返回的结 ...