Using jsPDF in custom widget

B-L

Hi,

I am trying to use a third party library (jsPDF) in my custom widget and I am getting the error 

jsPDF is not a constructor
at Object.startup

I am using the code here Edit fiddle - JSFiddle - Code Playground. I would greatly appreciate it if  anyone can help me understand why the code is not working. 

 

Javascript

 

///////////////////////////////////////////////////////////////////////////
define([
'dojo/_base/declare', 
'jimu/BaseWidget',
'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js',
//'./widgets/JointUseWidget/libs/jsPDF-master/dist/jspdf.node.min.js',
'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-3.4.1.js,https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js'	
],


function(
declare, 
BaseWidget,
jsPDF,
$) 
{

  return declare([BaseWidget], {

    baseClass: 'jimu-widget-Testing_PDF_Stuff',

    postCreate: function() {
      this.inherited(arguments);
      console.log('postCreate');
    },

    startup: function() {
      this.inherited(arguments);
		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');
		});

    },
	
	


  });
});

 

 

 

 

 

HTML

 

 

<div>

  <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>


</div>

 

 

B-L

I  simplified the code for testing and was able to download a PDF (finally). These are the changes I made:

 

1. added dojo/domReady,

2. changed    new jsPDF()     to     new jsPDF.jsPDF()

3. updated the URL of the third party library to https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js so that it uses the latest version. 

 

One other thing to note, is that in my original post i called doc.fromHTML() in accordance with the code sample i referenced. But when i take a look at the console log --> console.log("this is the doc: ", doc)  I do not see fromHTML(). So maybe that was just from a past version of the library? I am not sure, I could be reading the console.log wrong. 

 

 

This is the Javascript code, hopefully it help point someone in the right direction. 

///////////////////////////////////////////////////////////////////////////
define([
'dojo/_base/declare', 
'jimu/BaseWidget',
'https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js',
//'./widgets/Testing_PDF_Stuff/libs/jsPDF-master/dist/jspdf.umd.min.js',
'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-3.4.1.js,https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js',	
'dojo/domReady!'
],


function(
declare, 
BaseWidget,
jsPDF,
$,
domReady) 
{

  return declare([BaseWidget], {

    baseClass: 'jimu-widget-Testing_PDF_Stuff',
	
    postCreate: function() {
      this.inherited(arguments);
      console.log('postCreate');
    },
	

    startup: function() {
        this.inherited(arguments);
		
		$('#cmd').click(function () {
			
		const doc = new jsPDF.jsPDF();
		
		doc.text("Hello world!", 10, 10);
		doc.save("a4.pdf");		
		}); 
    }

  });
});