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>
Solved! Go to Solution.
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");		
		}); 
    }
  });
});
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");		
		}); 
    }
  });
});
