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");
});
}
});
});