Using jsPDF in custom widget

B-L — Thu, 25 Mar 2021 19:17:39 GMT

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>

Re: Using jsPDF in custom widget

B-L — Thu, 25 Mar 2021 20:11:27 GMT

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

topic Re: Using jsPDF in custom widget in ArcGIS JavaScript Maps SDK Questions

Using jsPDF in custom widget

Re: Using jsPDF in custom widget