Using Jspdf to generate PDF reports _jquery

Because foreground HTML has generated reports dynamically, and the foreground has a feature, a date range component, when you drag, the report changes dynamically without submitting to the background.
Therefore, we need to use the JS to generate the Health report:

Components to use:

Jquery.js
jspdf.js
canvg.js
html2canvas.js
jspdf.plugin.autotable.js

Foreground dynamically generated chart is now generally used HTML5 canvas or SVG, very unlucky, I encountered is SVG, if the flash has not been studied.

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 PDF report is: Html+svg

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

Train of thought: convert SVG into canvas, then convert Html+canvas to canvas, then use Html2canvas to convert canvas to picture, and finally write the picture to PDF.
Table's words to use: jspdf.plugin.autotable.js

Firefox:html2canvas cannot convert svg+html directly to canvas--> first convert SVG elements to canvas--> Html+canvas to Canvas
Chrome:html2canvas can convert svg+html directly into canvas

Here is the HTML (text) in an IFRAME open//mainly to exclude other elements of the interference caused by the unsuccessful, before the output is not successful, the use of the IFRAME is shown in the code is pulled down from the official website.
There is another problem: if the page chart converted to canvas, the Web page report dynamic changes in the function will be lost.
  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; Here is a report using the CSS to write back to the IFRAME, according to their own needs 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> 

Export PDF Function Exportaspdf () {//Get the HTML root node of the PDF to be exported var chartcenter = document.getElementById ("Chart-center"). Outerh
  
  TML;
  var fbody = Openwithiframe (Chartcenter);
  
  Svg2canvas (Fbody); Standard method of Html2canvas official website Html2canvas (fbody, {onrendered:function (canvas) {//var myimage = Canvas.todataurl ("Ima
      Ge/png ");
      alert (myimage);
      
      window.open (MyImage);
      /* CANVAS.TOBLOB (function (BLOB) {SaveAs (blob, "report.png");
      }, "Image/png");
      ///Convert picture to: Base64 encoded JPG image.
      var imgdata = Canvas.todataurl (' image/jpeg ');
            
      alert (imgdata);
      L: Transverse, p: longitudinal var doc = new Jspdf (' L ', ' pt ', ' A3 ');
      var doc = new Jspdf (' P ', ' mm ', [290, 210]);
      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"); x:500, y:30 doc.addimage (imgdata, ' jpeg ', 10, 60);
   Write location: X:10, y:60   
      Doc.addpage ();
      Create a new page//This is to write the table into the 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 ();
    Finally, the IFRAME is deleted}, background: "#fff",//the default background for the generated picture, otherwise, if your HTML root node does not set the background, it will be filled with black.
  
Allowtaint:true//Avoid some unrecognized picture interference, the default is False, encounter the image of the unrecognized interference will stop processing html2canvas});
 };

The above is the entire contents of this article, I hope you can enjoy.