I am trying to export an application to PDF using jsPDF. After browsing the web, grabbing a line of code here, a section there - I managed to get it to work ... a few.
This works in Firefox & Safari, but not in Chrome.
Used JS files (from jsPDF). Perhaps a bust. Together with jquery.
<script type="text/javascript" src="PDF/standard_fonts_metrics.js"></script> <script type="text/javascript" src="PDF/split_text_to_size.js"></script> <script type="text/javascript" src="PDF/from_html.js"></script> <script type="text/javascript" src="PDF/addhtml.js"></script> <script type="text/javascript" src="PDF/addimage.js"></script>
The code I'm using is:
<script type="text/javascript"> function demoFromHTML() { $('#listAreaPDF').css("display", "block"); var pdf = new jsPDF('p', 'pt', 'letter'); // source can be HTML-formatted string, or a reference // to an actual DOM element from which the text will be scraped. source = $('#listAreaPDF')[0]; pdf.setFontSize(24); pdf.text(35, 40, "PDF Title here"); pdf.setFontSize(10); pdf.text(500, 40, "Company Name AB"); // we support special element handlers. Register them with jQuery-style // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.) // There is no support for any other type of selectors // (class, of compound) at this time. specialElementHandlers = { // element with id of "bypass" - jQuery style selector '#bypassme': function (element, renderer) { // true = "handled elsewhere, bypass text extraction" return true } }; margins = { top: 80, bottom: 60, left: 40, width: 522 }; // all coords and widths are in jsPDF instance declared units // 'inches' in this case pdf.fromHTML( source, // HTML string or DOM elem ref. margins.left, // x coord margins.top, {// y coord 'width': margins.width, // max width of content on PDF 'elementHandlers': specialElementHandlers }, function (dispose) { html2canvas($("#presentationArea"), { onrendered: function (canvas) { var imgData = canvas.toDataURL( 'image/png'); pdf.addImage(imgData, 'PNG', 20, 300); pdf.save('Test.pdf'); } }); // dispose: object with X, Y of the last line add to the PDF // this allow the insertion of new lines after html // pdf.save('Test.pdf'); }, margins ); $('#listAreaPDF').css("display", "none"); } </script>
Credit for the code is found here. With minor changes suitable for my application, I added a connection to html2canvas to take the image out of the application and put it in a PDF. What actually works fine is in Safari and Firefox.
When I click and activate this function in Chrome, I don’t even get a blank PDF, I don’t get anything. Not even a popup or generated page.
What could be the reason Firefox & Safari works, but not Chrome? I have not tried Internet Explorer yet, but I held my breath. If you know a way for this to work, I'm all for it.
I welcome any help or suggestions you can provide.