JS Generate PDF Report

Because the foreground HTML has generated reports dynamically, and the foreground has a feature, a date range component, when you drag, the report will change dynamically without committing to the background.
So we need to use JS to generate the raw report:

Components to use:

Jquery.jsjspdf.jscanvg.jshtml2canvas.jsjspdf.plugin.autotable.js

Foreground dynamically generated chart is now generally used HTML5 canvas or SVG, very unlucky, I encountered is SVG, if Flash did not study.
Because the report also needs to maintain the appearance of the original HTML page, but not the entire HTML, the real need to convert to a PDF report is: Html+svg

Premise: jspdf support HTML, but the support is not very good, when you use an HTML directly generated PDF, in fact, he only retained the HTML inside the text, style, structure is lost.
For example: Table is lost.
Jspdf does not support SVG import.

Idea: Convert SVG to canvas, convert Html+canvas to canvas, then use Html2canvas to convert the canvas to a picture, and finally write the picture to PDF.
For table, use: jspdf.plugin.autotable.js

Firefox:html2canvas can convert SVG directly to canvas.
Chrome: You can't convert SVG to canvas so you need to convert SVG to canvas

//converts all SVG below the specified node to canvas//Here you need: Canvg.jsfunctionSvg2canvas (targetelem) {varNodestorecover = []; varNodestoremove = []; varSvgelem = Targetelem.find (' svg '); Svgelem.each (function(Index, node) {varParentNode =Node.parentnode; varSVG =node.outerhtml; varCanvas = document.createelement (' Canvas ');                CANVG (canvas, SVG);        Nodestorecover.push ({parent:parentnode, child:node});                Parentnode.removechild (node);                Nodestoremove.push ({parent:parentnode, child:canvas});    Parentnode.appendchild (canvas);    }); }

//this is where HTML (text) is opened in an IFRAME//The main is to exclude other elements of the interference caused by the unsuccessful, before the output is not successful, the use of the IFRAME is shown//This piece of code is the official website to pull down.
Another problem is that if you convert the page's chart to canvas, the functionality of dynamic changes to the Web page report will be lost. functionOpenwithiframe (HTML) {variframe = 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); varIfdoc =iframe.contentWindow.document;
　　//Here is the CSS used to write the report back to the IFRAME, according to their own needs      varstyle = "<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>Ifdoc.open ();            Ifdoc.write (HTML);        Ifdoc.close (); /*//Here do some fine tuning, depending on your needs 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"); */    returnFbody;}

//Export PDFfunctionexportaspdf () { // Get HTML root node to export PDF          varChartcenter = document.getElementById ("Chart-center"). outerHTML; varFbody =Openwithiframe (Chartcenter);        Svg2canvas (Fbody); //standard Method of Html2canvas official websiteHtml2canvas (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"); */                        //convert the picture to: Base64 encoded JPG image.             varImgdata = Canvas.todataurl (' image/jpeg ')); //alert (imgdata);                                    //l: Landscape, P: Portrait            varDoc =NewJspdf (' l ', ' pt ', ' A3 ')); //var doc = new Jspdf (' P ', ' mm ', [290, Page]);            //var doc = new jspdf ();//default is A4, because my report is relatively large, so I set the size specifically. Doc.setfontsize (22); Doc.setfonttype ("Bolditalic"); Doc.text ("Ticket report");//x:500, y:30doc.addimage (Imgdata,' JPEG ', 10, 60);//Write Location: x:10, y:60Doc.addpage (); //Create a new page                        //this is where the table is written into the PDF.             varres = Doc.autotablehtmltojson (document.getElementById ("tickets-summary-table"),true);                        Doc.autotable (Res.columns, res.data); Doc.save (' Ticket.report_ ' +NewDate (). GetTime () + '. pdf '); $(' #myFrmame '). Remove ();//Finally, remove the IFRAME}, Background:"#fff",//this gives the generated picture the default background, otherwise, if your HTML root node does not have a background set, it will be filled with black. Allowtaint:true    //avoid some unrecognized image interference, the default is False, encountered unrecognized image interference will stop processing Html2canvas    }); };

JS Generate PDF Report