Download a div in a HTML page as pdf using haxe compiled javascript

Vishwa Kolkar

unread,

Apr 17, 2015, 11:56:51 AM4/17/15

to haxe...@googlegroups.com

Hi Guys,

I'm new to the haXe, but I'm a JavaScript coder and I know my way to convert the div content in the html to a pdf and download it on click.

HTML:

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

JS:

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});

This same thing I want to achieve it in haxe. Please show me a way.

Thank you

Confidant

unread,

Apr 17, 2015, 12:43:59 PM4/17/15

to haxe...@googlegroups.com

You should make an extern for jsPDF I think. It just has to include the functions you are calling.
Per my tweet, you can use the JQuery extern too.

Philippe Elsass

unread,

Apr 17, 2015, 1:03:40 PM4/17/15

to haxe...@googlegroups.com

Easy:

import js.JQuery.JQueryHelper.J;

class Test {
	static function main() {
		var doc = untyped __new__('jsPDF'); 

		var specialElementHandlers = {
			'#editor': function (element, renderer) {
				return true;
			}
		};
		

		J('#cmd').click(function(_) {
			doc.fromHTML(J('#content').html(), 15, 15, {

				'width': 170,
				'elementHandlers': specialElementHandlers
			});
			doc.save('sample-file.pdf');
		});
	}
}

Externs for jsPDF would make the code completely strongly typed, and not using jQuery would make it even better ;)

Cool lib BTW.

On Fri, Apr 17, 2015 at 5:43 PM, Confidant <al...@alteredegg.com> wrote:

You should make an extern for jsPDF I think. It just has to include the functions you are calling.
Per my tweet, you can use the JQuery extern too.

--
To post to this group haxe...@googlegroups.com
http://groups.google.com/group/haxelang?hl=en
---
You received this message because you are subscribed to the Google Groups "Haxe" group.
For more options, visit https://groups.google.com/d/optout.

--

Philippe

Vishwa Kolkar

unread,

Apr 17, 2015, 1:39:04 PM4/17/15

to haxe...@googlegroups.com

Thank a lot @Phillppe I'm trying your way.

Vishwa Kolkar

unread,

Apr 17, 2015, 2:05:24 PM4/17/15

to haxe...@googlegroups.com

Hi Philippe,

I tried this code with along with the jQuery and jsPDF.min.js scripts included in the html file, but I ain't able to download the pdf file

haXe compiled js code:

(function () { "use strict";
var Test = function() { };
Test.main = function() {

        var doc = new jsPDF();
               var specialElementHandlers = { '#editor' : function(element,renderer) {

                return true;

        }};

        new js.JQuery("#cmd").click(function(_) {

                doc.fromHTML(new js.JQuery("#content").html(),15,15,{ width : 170, elementHandlers : specialElementHandlers});

                doc.save("sample-file.pdf");

        });

};

var js = {};

var q = window.jQuery;

js.JQuery = q;

})();

index.html:

<!DOCTYPE html>
<html>
  <head>


                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>


                <script src="http://localhost:8000/jsPDF/dist/jspdf.min.js"></script>


                <script src="http://localhost:8000/pdf.js"></script>
        </head>


        <body>




                <div id="content">


                             <h3>Hello, this is a H3 tag</h3>
                                 <p>a pararaph</p>


                 </div>


                <div id="editor"></div>


                <button id="cmd">generate PDF</button>




        </body>

</html>

Please suggest me if i'm missing out any thing.

On Friday, April 17, 2015 at 10:03:40 AM UTC-7, Philippe Elsass wrote:

Philippe Elsass

unread,

Apr 17, 2015, 2:27:21 PM4/17/15

to haxe...@googlegroups.com

Move the script tags at the of the body - the code isn't waiting for document ready event.

Vishwa Kolkar

unread,

Apr 17, 2015, 2:56:02 PM4/17/15

to haxe...@googlegroups.com

I did move it to the end of the body, but it didn't download the pdf. I checked in the network in the inspect element as well.

On Friday, April 17, 2015 at 10:03:40 AM UTC-7, Philippe Elsass wrote:

Vishwa Kolkar

unread,

Apr 17, 2015, 3:11:17 PM4/17/15

to haxe...@googlegroups.com

Thanks a lot Philippe it's working all good now.

On Friday, April 17, 2015 at 10:03:40 AM UTC-7, Philippe Elsass wrote:

Reply all

Reply to author

Forward