由于前台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. http协议之 COOKIE

    cookie我们都很了解,这里描述下cookie的几个参数意义 key = "qq", value = "Bobser" .. os.time(), path ...

  2. redux基础（1）

    redux ps:每个案例都是接着上一个案例写的 主要以案例讲解如何使用,具体概念请参考如下: 基本概念参考1 基本概念参考2 案例源码戳这里 一.Store.Action.Reducer简介 Sto ...

  3. MySQL的转义符 ` 作用

    ` 是 MySQL 的转义符,避免和 mysql 的本身的关键字冲突,只要你不在列名.表名中使用 mysql 的保留字或中文,就不需要转义. 所有的数据库都有类似的设置,不过mysql用的是`而已.通 ...

  4. android WebView中js的alert()失效

    WebView的设置代码 wv = (WebView) findViewById(R.id.webView1); wv.getSettings().setJavaScriptEnabled(true) ...

  5. java 实现输出姓和名

    package xiaojie; import java.util.Scanner; public class baiJiaXing { public static void main(String[ ...

  6. Windbg 基础命令 《第一篇》

    Windbg.exe是Windows的一个调试工具,它支持两种调试模式,即“实时调试模式(Living)”和“事后调试模式(Postmortem)”. 实时模式:被调试的程序正在运行当中,调试器可以实 ...

  7. 不用软件快速拥有几百个QQ群并都是管理员

    不用软件快速拥有几百个QQ群并都是管理员!快速拥有有几十万精准数据库的方法 !和快速收集上亿邮箱的思维方法(附上5种赚钱方法).pdf_免费高速下载|百度云 网盘-分享无限制 http://pan.b ...

  8. 文件权限控制篇access alphasort chdir chmod chown chroot closedir fchdir fchmod fchown fstat ftruncate getcwd

    access(判断是否具有存取文件的权限) 相关函数 stat,open,chmod,chown,setuid,setgid 表头文件 #include<unistd.h> 定义函数 in ...

  9. 3D屏保:N皇后

    前几天园子里有人发表关于8皇后的算法.只有代码,没有能运行的DEMO多枯燥.于是我这两天抽时间写了个N皇后的屏保程序.程序启动后会从4皇后到14皇后显示其所有排列,每隔0.5秒自动切换一次.按下空格键 ...

  10. Linux获取当前时间

    代码(可以把clock_gettime换成time(NULL)) void getNowTime() { timespec time; clock_gettime(CLOCK_REALTIME, &a ...