Jspdf: Converts HTML elements to an equally wide pdf__oracle

Requirements: Export HTML elements to PDF at the front end.

Required plugins: Jspdf.js,html2canvas.js.

Realize:

HTML is a flowchart, so the width and height are not fixed. After a variety of tests, it is found that when jspdf new PDF, the PDF page is set directly to the width and height of the HTML.

The new FDF file code is as follows:

Export PDF Function Exportpdf () {//Get the HTML root node of the PDF to be exported var chartcenter = document.getElementById ("right"). outerHTML; var fbody = Openwithiframe (chartcenter);//Add IFRAME element to exclude interfering elements (this method is not posted) Svg2canvas (fbody);
	Convert SVG to canvas (this method is not posted) var canvas = document.createelement (' canvas '); Canvas.width = parsefloat (document.getElementById ("right"). ScrollWidth);//Get scroll bar length canvas.height = parsefloat ( document.getElementById ("right"). scrollheight); <span style= "font-family:arial, Helvetica, Sans-serif;" >//get scroll bar width </span>//html2canvas official website standard method Html2canvas (Fbody, {canvas:canvas, onrendered:function (canvas)
			{//Convert picture to: Base64 encoded JPG image.
			var imgdata = Canvas.todataurl ();
			var canwidth = canvas.width;
			var canheight = canvas.height;
			var arrdpi = js_getdpi ()//Get monitor dpi (this method is not posted) var Dpix = 96;
			var dpiy = 96;
				if (arrdpi.length>0) {Dpix = arrdpi[0];
			Dpiy = arrdpi[1]; //L: Transverse, P: Portrait; in: inches, mm mm; Canvas Size: a3,a4,leter,[] (Custom size when content is an array) var doc =New Jspdf (' l ', ' in ', [(CANWIDTH+10)/dpix, (canheight+10)/DPIY])//Set PDF height to the width of the element to be displayed, convert pixels to inches doc.addimage (Imgdata, ' PNG ', 7/DPIX,5/DPIY); Write location: x:5, Y:5 unit: Inch $ (' #myFrmame '). Remove ();
		Finally, the IFRAME is deleted doc.save (' test.pdf ');
	    Background: "#FFFFFF",//the default background for the generated picture, otherwise, if the HTML root node does not set the background, it will be filled with black.
Tainttest:false, allowtaint:true//Avoid some unrecognized picture interference, the default is False, encounter unrecognized picture interference will stop processing html2canvas}); };

When you create a new flexible value to the PDF width, you can achieve HTML page and PDF page as wide and high.

PS: Attention unit, Jspdf seemingly does not support pixels, so you need to convert pixels and inches, millimeters and so on.