jspdf

How to open generated pdf using jspdf in new window

Based on the source you can use the ‘dataurlnewwindow’ parameter for output(): doc.output(‘dataurlnewwindow’); Source in github: https://github.com/MrRio/jsPDF/blob/master/jspdf.js#L914 All possible cases: doc.output(‘save’, ‘filename.pdf’); //Try to save PDF as a file (not works on ie before 10, and some mobile devices) doc.output(‘datauristring’); //returns the data uri string doc.output(‘datauri’); //opens the data uri in current window doc.output(‘dataurlnewwindow’); //opens … Read more

how to use html2canvas and jspdf to export to pdf in a proper and simple way

I have made a jsfiddle for you. <canvas id=”canvas” width=”480″ height=”320″></canvas> <button id=”download”>Download Pdf</button> ‘ html2canvas($(“#canvas”), { onrendered: function(canvas) { var imgData = canvas.toDataURL( ‘image/png’); var doc = new jsPDF(‘p’, ‘mm’); doc.addImage(imgData, ‘PNG’, 10, 10); doc.save(‘sample-file.pdf’); } }); jsfiddle: http://jsfiddle.net/rpaul/p4s5k59s/5/ Tested in Chrome38, IE11 and Firefox 33. Seems to have issues with Safari. However, Andrew … Read more

how to use addHTML function in jsPDF

First, you have to include jsPDF library, and also html2canvas or rasterizeHTML. Then, just create a jsPDF object and save to pdf the entire ‘body’ tag (or whatever): var pdf = new jsPDF(‘p’,’pt’,’a4′); pdf.addHTML(document.body,function() { pdf.save(‘web.pdf’); }); <script src=”https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js”></script> <body> <p id=”to-pdf”>HTML content…</p> </body> You can find more examples on the jsPDF website: … Read more

jsPDF can’t get any styling to work

I think the problem is that you use media=”print” instead of media=”screen”. Try making two seperate files, one for print and one for the screen: <link rel=”stylesheet” href=”https://stackoverflow.com/questions/20460035/print.css” type=”text/css” media=”print”/> <link rel=”stylesheet” href=”screen.css” type=”text/css” media=”screen”/> The screen one will contain the styling for the page as seen in a browser. The print one will contain … Read more

jsPDF multi page PDF with HTML renderer

I have the same working issue. Searching in MrRio github I found this: https://github.com/MrRio/jsPDF/issues/101 Basically, you have to check the actual page size always before adding new content doc = new jsPdf(); … pageHeight= doc.internal.pageSize.height; // Before adding new content y = 500 // Height position of new content if (y >= pageHeight) { doc.addPage(); … Read more

HTML2canvas generates Blurry images

you can use scale options in html2canvas. In the latest release, v1.0.0-alpha.1, you can use the scale option to increase the resolution (scale: 2 will double the resolution from the default 96dpi). // Create a canvas with double-resolution. html2canvas(element, { scale: 2, onrendered: myRenderFunction }); // Create a canvas with 144 dpi (1.5x resolution). html2canvas(element, … Read more

How to set image to fit width of the page using jsPDF?

You can get the width and height of PDF document like below, var doc = new jsPDF(“p”, “mm”, “a4″); var width = doc.internal.pageSize.getWidth(); var height = doc.internal.pageSize.getHeight(); Then you can use this width and height for your image to fit the entire PDF document. var imgData=”data:image/jpeg;base64,/9j/4AAQSkZJ……”; doc.addImage(imgData, ‘JPEG’, 0, 0, width, height); Make sure that … Read more