Use jspdf to generate pdf report

Since the foreground html has generated reports dynamically, and the foreground has a function, a date range component. When you drag, the report will change dynamically without submitting it to the background.
Therefore, it is necessary to use js to generate reports:

Components used:

The chart dynamically generated by the front-end usually uses html5 canvas or svg. Unfortunately, I encountered svg, but I haven't studied flash.

Since the report still needs to maintain the appearance of the original html page, but it is not the entire html, the one that really needs to be converted into a pdf report is: html+svg

Prerequisite: jsPDF supports html, but the support is not very good. When you use an html to directly generate pdf, it actually only retains the text, style, and structure in the html.
For example: the table is lost.
jsPDF does not support svg import.

Idea: convert svg to canvas, then convert html+canvas to canvas, then use html2canvas to convert canvas to pictures, and finally write the picture to pdf.
If the table is used:

firefox: html2canvas cannot directly convert svg+html into canvas --> first convert svg elements into canvas --> html+canvas into canvas
chrome:html2canvas can directly convert svg+html into canvas

//Convert all svgs under the specified node to canvas// Need here:function svg2canvas (targetElem) {
  var nodesToRecover = [];
  var nodesToRemove = [];

  var svgElem = ('svg');

  (function(index, node) {
    var parentNode = ;
    
    var svg = ;

    var canvas = ('canvas');
    
    canvg(canvas, svg);
    
    ({
      parent: parentNode,
      child: node
    });
    (node);
    
    ({
      parent: parentNode,
      child: canvas
    });
    
    (canvas);
  });
  
}

//Here is to open html (text) in an iframe//It is mainly to eliminate interference from other elements, resulting in unsuccessful results. The output was not successful before, and only the iframe was used when it was shown.//This code was cut down on the official website.//There is another problem: if the page chart is converted into canvas, the dynamic change of web page reports will be lost.function openWithIframe(html){
    
  var iframe = ('iframe');
  ("id", "myFrmame");
  
  var $iframe = $(iframe);
  $({
   'visibility': 'hidden', 'position':'static', 'z-index':'4'
  }).width($(window).width()).height($(window).height());

  $('body').append(iframe);
  
  
  var ifDoc = ;
  
//This is to rewrite the css used by the report into the iframe, according to your own needs  var style = "&lt;link href='//css/' rel='stylesheet' type='text/css'&gt;";
  style+="&lt;link href='//css/' rel='stylesheet' type='text/css'&gt;";
  style+="&lt;link href='//css/' rel='stylesheet' type='text/css'&gt;";
  
  html = "&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;"+style+"&lt;/head&gt;&lt;body&gt;"+html+"&lt;/body&gt;&lt;/html&gt;"
  
  ();    
  (html);    
  ();
  
  /*
   // Make some fine adjustments here according to your own needs
   var fbody = $().find("body");
  
   ("#chart-center").removeAttr("width");
  
   (".page-container").css("width", "370px");
   (".center-container").css("width", "600px");
  
   ("#severity-chart svg").attr("width", "370");
   ("#status-chart svg").attr("width", "300");
   */
  return fbody;
}

//Export pdffunction exportAsPDF(){
  //Get the html root node to export pdf  var chartCenter = ("chart-center").outerHTML;
  
  var fbody = openWithIframe(chartCenter);
  svg2canvas(fbody);
  
  // Standard method of html2canvas official website  html2canvas(fbody, {
    onrendered: function(canvas) {
      //var myImage = ("image/png");
      //alert(myImage);
      //(myImage);
      
      /*
      (function(blob) {
        saveAs(blob, "");
      }, "image/png");
      */
      
      //Convert the image to: base64 encoded jpg image.      var imgData = ('image/jpeg');
      //alert(imgData);
            
      //l: Horizontal, p: Vertical      var doc = new jsPDF('l', 'pt', 'a3');
      //var doc = new jsPDF('p', 'mm', [290, 210]);
      //var doc = new jsPDF();//The default is A4. Since my report is relatively large, the size is specially set.      (22);
      ("bolditalic");
      (500, 30, "Ticket Report"); //x:500, y:30
      
      (imgData, 'jpeg', 10, 60); //Writing location: x:10, y:60      
      ();  // Create a new page      
      //This is to write the table into the PDF.      var res = (("tickets-summary-table"), true);
      (, );
      
      ('ticket.report_'+new Date().getTime()+'.pdf');
      $('#myFrmame').remove(); //Delete the iframe at the end    },
    background:"#ffff", //The default background for the generated image is given here. 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, default is false. If you encounter unrecognized image interference, the processing of html2canvas will be stopped  });
  
};

The above is the entire content of this article, I hope you like it.