Use jspdf to generate a pdf Report _ jquery

This article describes how to use jspdf to generate pdf reports. it is very practical. if you need it, you can refer to it. The foreground html has dynamically generated a report, and the foreground has a function, a date range component. when you drag the report, the report changes dynamically without being submitted to the background.
Therefore, you need to use js to generate a report:

Components used:

jquery.jsjspdf.jscanvg.jshtml2canvas.jsjspdf.plugin.autotable.js

Currently, the front-end dynamically generated chart uses html5 canvas or svg. Unfortunately, I have encountered svg. I have never studied it in flash.

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

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

Idea: convert svg to canvas, convert html + canvas to canvas, use html2canvas to convert canvas to image, and write the image to pdf.
Table: jspdf. plugin. autotable. js

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

// Convert all the svg files under the specified node to canvas // you need to: canvg. jsfunction 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 );});}

// Here, html (text) is opened in an iframe. // It is mainly used to exclude interference from other elements, leading to unsuccessful output, iframe // This code is used only on the official website. // Another problem is that if the chart of the page is converted to canvas, the dynamic change function of the web page report will be lost. Function openWithIframe (html) {var iframe = document. createElement ('iframe'); iframe. setAttribute ("id", "myFrmame"); var $ iframe = $ (iframe); $iframe.css ({'Visibility ': 'hiden', 'position': 'static ', 'Z-Index': '4 '}). width ($ (window ). width ()). height ($ (window ). height (); $ ('body '). append (iframe); var ifDoc = iframe.content?#doc ument; // Here, the css used in the report is re-written to iframe. var style ="
 "; Style + ="
 "; Style + ="
 "; Html =""+ Style +""+ Html +""IfDoc. open (); ifDoc. write (html); ifDoc. close ();/* // here, make some fine-tuning. based on your own 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"); */return fbody ;}

// Export pdffunction exportAsPDF () {// Obtain the html root node var chartCenter = document. getElementById ("chart-center "). outerHTML; var fbody = openWithIframe (chartCenter); svg2canvas (fbody); // standard method of html2canvas official website 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"); * // convert the image to a base64 encoded jpg image. Var imgData = canvas. toDataURL ('image/jpeg '); // alert (imgData); // l: horizontal, p: vertical var doc = new jsPDF ('L', 'pt ', 'A3 '); // var doc = new jsPDF ('P', 'mm', [1, 290,210]); // var doc = new jsPDF (); // The default value is A4. because my report is large, I set the size specially. Doc. setFontSize (22); doc. setFontType ("bolditalic"); doc. text (500, 30, "Ticket Report"); // x: 500, y: 30 doc. addImage (imgData, 'jpeg ', 10, 60); // write location: x: 10, y: 60 doc. addPage (); // create a new page // write the table to pdf. Var res = doc. autoTableHtmlToJson (document. getElementById ("tickets-summary-table"), true); doc. autoTable (res. columns, res. data); doc. save ('ticket. report _ '+ new date().gettime({{'}'); $ (' # myfrmame '). remove (); // finally delete iframe}, background: "# fff", // the default background of the generated image. otherwise, if the background is not set for your html root node, it will be black. AllowTaint: true // avoid some unrecognized Image Interference. the default value is false. If the image is not recognized, html2canvas will be stopped });};

The above is all the content of this article. I hope you will like it.